Vertical content switcher
This component groups image and content into interactive, clickable tabs.
Crafted with impressive performance and power
Reap the benefits of a dual-monitor setup from anywhere with an industry-first 6” 1080p touchscreen mounted above the keyboard. Allows you to seamlessly display and interact with other applications without interrupting gameplay.
Crafted with impressive performance and power
Reap the benefits of a dual-monitor setup from anywhere with an industry-first 6” 1080p touchscreen mounted above the keyboard. Allows you to seamlessly display and interact with other applications without interrupting gameplay.
Usage
This module presents a single key point with multiple supporting points as an interactive set of hide/show captions and visual aids.
Module specifications
- Module title font style is configurable
- Background, text and clickable arrow colors are configurable
- Background can support a static image
- Image to content ratio width is configurable
- Option to switch module orientation from left to right
- Option to place module title/description above tab content or centered over entire module
- 5 tabs max
Character counts (with spaces)
- Module eyebrow - 80 characters max
- Module title - 80 characters max
- Module description - 200 characters max
- Tab title - 26 characters max
- Tab description - 260 characters max
Example layouts
60 / 40 split with module eyebrow, title, and module description and tab description in 1920px
70 / 30 split with module title and description in 1280px
Tablet variations
Mobile variations
Tablet and mobile variations. On smaller screen widths, columns will stack and arrows/pagination appears to replace the tab UI.
Resources
For Zeplin access contact the UX Design Manager
Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.
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
- 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
- Ελλάδα
- България
- Казахстан
- Србија
- Україна
- ישראל
- الشرق الأوسط
- المملكة العربية السعودية
- ไทย
- 中华人民共和国
- 臺灣 地區
- 日本
- 香港特別行政區
- 한국
©2025 HP Development Company, L.P. The information contained herein is subject to change without notice.