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 between 769px and 992px.

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

The buttons are styled with a gray background when focused or hovered.

The button corresponding to the currently visible panel is given an active state with a gray background and blue border.

There is a recommended maximum of 6 panels, which is the maximum amount of buttons that can reasonably fit within one row at the 992px breakpoint.

Button text does not wrap.

Videos open in a modal.

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.