HP.com Design System HP.com Design System HP.com Design System

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.

  • Quality

    Original HP Ink Cartridges are designed for reliability and consistency the first time, and every time.

    Learn

    Shop

  • Sustainability

    Feel good about printing — most Original HP Ink Cartridges are developed from recycled materials, including plastic bottles.2

  • Indoor air quality

    Maintaining indoor air quality is an HP priority. Original HP Inks are water-based for odorless, low-emission printing.

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

Reference

For Zeplin access contact the UX Design Manager

Figma

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.