HP.com Design System HP.com Design System
- HP.com Design System
-
Overview
-
Typography
-
Color
-
Photography
-
UI Elements
- Modular components
-
Experiential components
- Secondary navigation
- Anchor navigation
- Basic sticky
- Countdown timer
- Faceted search
- Feature focus
- Highlighted CTA
- KSP carousel
- Data table
- Large card slider
- Performance comparison
- Port viewer
- Product module
- Use case drawer
- Vertical content switcher
- Audio player
- Horizontal content switcher
- Use case cards
- Custom info banner
- Small info banner
- Step-by-step
- Statistics drawer
- Product magnifier
- Model viewer
- In-page navigation
- Back-to-top button
- Resolution module
- Compare table
- Product view card
- Basic tabs
- Content accordian
- Visual tabs
- Category hotpots
- Scroll Reveal
- Click to Shop
- Horizontal Scrolling
- Parallax Lite
- Scrolling Ambient Video
- Pop-up Banner
-
Resources
Use case drawer
The use case drawer features 2 or 3 personas or use case examples showcasing why a product or service is right for a target customer.
Design for your demanding industry standards
Webcam
Meet your tightest deadlines even when editing raw 6K and 8K footage. Ingest files fast and get ultra-smooth video playback when doing color correction and compositing.
Webcam
Webcam
Webcam
Webcam
Printer
Print at the pace of business—this printer is equipped with fast two-sided printing. Grab the documents you need and go. Print first pages in as fast as 7 seconds. Help save energy with HP Auto-On/Auto-Off Technology.
Printer
Printer
Printer
Printer
Monitor
Trust the colors you see on screen with the world class Z by HP color accuracy you expect. Equipped with the creative color gamuts you work in most, you’ll have all the shades and hues you need for web, photography, and video creation on Mac® or PC. Lean into realism with HDR 400 for darker blacks and brighter whites.
Monitor
Monitor
Monitor
Monitor
Usage
The use of provocative image and focused descriptor text allows the user to easily toggle through product information. Use this module when you want to magnify specific product features.
Module specifications
- 2 - 3 columns
- Background and text colors are configurable
- Module and drawer titles’ font style are configurable
- Ensure that images have overlay or whitespace to provide best readability
- Icons specs: 40x40px
Character counts (with spaces)
- Exterior drawer title - 80 characters max
- Interior drawer subtitle - 80 characters max
- Interior drawer body - 180 characters max
Example layouts
2 columns with subtitle and icons
Default Tablet
Default Mobile
Resources
Select Your Country/Region and Language
Close Country/Region Selector Dialog- Africa
- Afrique
- België
- Belgique
- Česká republika
- Danmark
- Deutschland
- Eesti
- España
- France
- Hrvatska
- Ireland
- Italia
- Latvija
- Lietuva
- Magyarország
- Middle East
- Nederland
- Norge
- Österreich
- Polska
- Portugal
- România
- Saudi Arabia
- Slovenija
- Slovensko
- South Africa
- Suisse
- Suomi
- Sverige
- Switzerland
- Türkiye
- United Kingdom
- Ελλάδα
- България
- Казахстан
- Србија
- Україна
- ישראל
- الشرق الأوسط
- المملكة العربية السعودية
HP Worldwide
Select Your Country/Region and Language
- 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
- 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.