HP.com Design System HP.com Design System HP.com Design System
- HP.com Design System
-
Overview
-
Typography
-
Color
-
Photography
-
UI Elements
- Modular components
-
Experiential components
- Anchor navigation
- Audio player
- Back-to-top
- Basic Sticky
- Basic tabs
- Breadcrumbs
- Category hotspots
- Compare table
- Content accordian
- Countdown timer
- Custom info banner
- Faceted search
- Feature focus
- Highlighted CTA
- Horizontal content switcher
- Horizontal Scrolling
- Hotspot Content Viewer
- In-page navigation
- KSP carousel
- Large card slider
- Map component
- Model viewer
- Performance comparison
- Pop up banner
- Port viewer
- Product module
- Product magnifier
- Product view card
- Resolution module
- Scrolling ambient video
- Secondary navigation
- Small info banner
- Statistics card
- Statistics drawer
- Step-by-step
- Use case card
- Use case drawer
- Vertical content switcher
- Visual tabs
Hotspot Content Viewer
A module that makes shopping a more inspirational and immersive experience.
Form meets function
Usage
This module brings lifestyle imagery to the forefront and lets our users explore products in-situ while maintaining an overall message. We only show one product at a time, focusing on what the user is most interested in.
Module specifications
- Minimum of 2 hotspots; there is not a set limit but we recommend a max of 10
- Accommodates only static imagery
- Can accommodate CTA's, bullets and pricing
- Background color configurable
- Copy sizing configurable
- May swap orientation (image on left, cards on right)
- Ability to place the main headline above the module, or within the card.
- If content in card starts to exceed space, it will start to scroll within the card.
- Image for both the main hotspot area and image for each individual card required.
Character counts (with spaces)
- Module headline - 50 max characters
- Module body copy - 120 max characters
- Hotspot copy - 160 max characters
Example layouts
Desktop view with card orientation on the right.
Tablet view
Mobile view
Mobile view expanded
Resources
Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.
Select Your Country/Region and Language
Close Country/Region Selector Dialog
Europe, Middle East and Africa
- Africa
- Afrique
- België
- Belgique
- Česká republika
- Danmark
- Deutschland
- Eesti
- España
- France
- Hrvatska
- Ireland
- Italia
- Latvija
- Lietuva
- Magyarország
- Middle East
- Nederland
- Nigeria
- Norge
- Österreich
- Polska
- Portugal
- România
- Saudi Arabia
- Slovenija
- Slovensko
- South Africa
- Suisse
- Suomi
- Sverige
- Switzerland
- Türkiye
- United Kingdom
- Ελλάδα
- България
- Казахстан
- Србија
- Україна
- ישראל
- الشرق الأوسط
- المملكة العربية السعودية
Country/Region :
Close Country/Region Selector
SelectedUnited States
popUpSRBeginingLabelString
HP Worldwide
Select Your Country/Region and Language
Click or use the tab key to select your country
Close Country/Region Selector Dialog
- Africa
- Afrique
- América Central
- Argentina
- Asia Pacific
- Australia
- Bangladesh
- België
- Belgique
- Bolivia
- Brasil
- Canada
- Canada - Français
- Caribbean
- Česká republika
- Chile
- Colombia
- Danmark
- Deutschland
- Ecuador
- Eesti
- España
- France
- Hong Kong SAR
- Hrvatska
- India
- Indonesia
- Ireland
- Italia
- Latvija
- Lietuva
- Magyarország
- Malaysia
- México
- Middle East
- Nederland
- New Zealand
- Nigeria
- Norge
- Österreich
- Pakistan
- Paraguay
- Perú
- Philippines
- Polska
- Portugal
- Puerto Rico
- România
- Saudi Arabia
- Singapore
- Slovenija
- Slovensko
- South Africa
- Sri Lanka
- Suisse
- Suomi
- Sverige
- Switzerland
- Türkiye
- United Kingdom
- United States
- Uruguay
- Venezuela
- Việt Nam
- Ελλάδα
- България
- Казахстан
- Србија
- Україна
- ישראל
- الشرق الأوسط
- المملكة العربية السعودية
- ไทย
- 中华人民共和国
- 臺灣 地區
- 日本
- 香港特別行政區
- 한국
- Recalls|
- Product recycling|
- Accessibility|
- CA Supply Chains Act|
- Privacy|
- Use of cookies|
- Your privacy choices|
- Terms of use|
- Limited warranty statement|
- Terms & conditions of sales & service|
©2024 HP Development Company, L.P. The information contained herein is subject to change without notice.