Component

Tabbed Content

SCSS Location: /styles/scss/partial/_tabbed-content.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

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.

Pill Style

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Alt text describing the image.

Ut Tristique Nulla Tempus Commodo Pharetra

Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis.

Mauris Viverra Interdum Mattis

Phasellus nec semper nibh, eget sagittis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Alt text describing the image.

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet.

Alt text describing the image.

Ut Tristique Nulla Tempus Commodo Pharetra

Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Alt text describing the image.

Interdum Mattis Mauris Viverra

Eget sagittis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Alt text describing the image.

Text Style

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor.

Ut Tristique Nulla Tempus Commodo Pharetra

Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis.

Alt text describing the image.

Mauris Viverra Interdum Mattis

Phasellus nec semper nibh, eget sagittis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Alt text describing the image.

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet.

Alt text describing the image.

Ut Tristique Nulla Tempus Commodo Pharetra

Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Alt text describing the image.

Interdum Mattis Mauris Viverra

Eget sagittis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor, sed rhoncus neque enim eu ipsum. Mauris viverra interdum mattis. Integer nec molestie tellus. Phasellus nec semper nibh, eget sagittis neque.

Text Style with Universal Header and Display Content Before Image option chosen

Explore the Features, Benefits & Highlights

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin suscipit laoreet. Ut tristique nulla tempus commodo pharetra. Nam auctor, urna id consequat vulputate, ipsum ante pulvinar dolor.