Tabbed Content

Description

A component comrised of panels that contain text and an image or video, and a set of buttons which control the visibility of corresponding panels at 992px viewport and above.

Guidelines

The buttons are hidden and all panels are visible below 992px.

Panels are displayed in one column below 768px, and in two columns from 769px to 991px.

At 992px and above, only the active panel is displayed.

The button corresponding to the currently visible panel is given active styling.

For "Pill" style Tabbed Content components, there is a recommended maximum of 6 panels, which is the maximum amount of pills that can reasonably fit within one row at the 992px breakpoint.

Videos open in a modal.

For a Tabbed Content component with a List Style of text, CMS editors can swap the order of elements in the tab panel by checking the Display Content Before Image checkbox.

If the Display Content Before Image checkbox is checked, the tabbed-content__container element should be given an additional class of tabbed-content__container--inverse.

If a Universal Header is also being displayed along with the Tabbed Content component, the tabbed-content__container element should be given an additional class of tabbed-content__container--top-border.

Usage

Use the Tabbed Content component when multiple small-to-medium pieces of content should be condensed within one component that is visible on a desktop screen all at once.

When focused on the tablist, users are able to use the left and right arrow keys to navigate through the buttons.