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

Basic Tabs

Basic tabs enable the user to toggle between content placed in the section below.

Usage

This flexible component allows for in-depth related content. It sticks on scroll until the end of the component.

Module specifications

Copy, background, and UI element colors are configurable
Recommend up to 6 tabs
Tab content should be related
Any component can be placed inside tabs

Character counts (with spaces)

Tab title - not set, but 50 max characters are recommended

Example layouts

Backgrounds should generally be either Black or White depending on the page.

Tablet

Mobile

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.