Body tabs

Body tabs (vi20 )

Our vi20 Body tabs component can be used to separate related pieces of content (and at the same level of hierarchy) that don't need to be viewed at the same time (different product options that the user would never compare, separate features, etc.). Keep in mind that the first tab will be viewable by default so the order is important.

The tab labels should be short and use plain language. You can have up to 6 tabs in this component, but the character count for 5 or 6 tabs is considerable shorter. Between 3 and 4 tabs is an ideal amount from an interaction and comprehension standpoint.

A few key features include:

• Include an optional eyebrow, headline, and description copy above the body tabs to help introduce the content you are displaying
• Choose between multiple brand colors for the optional introduction section
• Newly designed responsive layout to better aid in tablet/mobile functionality
  • Horizontal scroll (swipeable on tablet/mobile)
  • Tab lengths are now defined by its label
• Ability to turn off top padding inside tab content
  • This should only be used if you are using a full-bleed color component as your initial content piece to alleviate a “double padding” issue
• Better visual separation between the end of the tab content, and the continuation of the initial web page content

Publishing? View the DCR guidebook for detailed instructions.

Tab one content headline

For all body content, just pull in our paragraph component, the same way you would for all of your standard page content. Remember, if you decide to use a full-bleed color component as your initial content piece, ask your publisher to turn off the “top padding” in the DCR.

We recommend always starting with our BLK_White no matter the component.

Note: the bottom black border is built in to establish the end of your tab content, and the continuation of the initial web page content.

Tab two content headline

For all body content, just pull in our paragraph component, the same way you would for all of your standard page content. Remember, if you decide to use a full-bleed color component as your initial content piece, ask your publisher to turn off the “top padding” in the DCR.

We recommend always starting with our BLK_White no matter the component.

Note: the bottom black border is built in to establish the end of your tab content, and the continuation of the initial web page content.

Tab three content headline

For all body content, just pull in our paragraph component, the same way you would for all of your standard page content. Remember, if you decide to use a full-bleed color component as your initial content piece, ask your publisher to turn off the “top padding” in the DCR.

We recommend always starting with our BLK_White no matter the component.

Note: the bottom black border is built in to establish the end of your tab content, and the continuation of the initial web page content.

Rules and recommendations

Overflow behavior

When two or more tabs cannot fit on screen, they are shown as a scrollable tab overflow. The width of each tab is defined by the length of its text label. Arrows appear to the left and right of the component to indicate there are more tab items.

In this example, once the user clicks/taps/swipes, a left arrow will appear.

Alternate variations

To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.

* NOTE: These examples are scaled for easier viewing.