Patterns

Banners are containers for organizing related content and actions.

Cards are containers for organizing related content and actions.

Carousels are used to fit a lot of content into a small space. Because carousels are common anti-patterns, this component is used by approval only.

Embed allows third-party content to be added to a page. Media can be added from a supported URL, a pre-configured embeddable URL, or with safe freeform HTML.

Heroes are containers for emphasizing promotional or important content.

Image allows a single image asset to be added to the page.

Page headers are containers for showing a page title without a hero image.

Text is used for body text content.

A title is a heading for the page or a page section.

Breadcrumbs are text links at the top of the page that locate the user within the navigation hierarchy.

Primary navigation lives at the top of the page and contains top-level navigation items and company branding. It can contain global site search, utility navigation, and primary actions.

Secondary navigation is a group of links that allow the user to navigate within a section of a site.

Tertiary navigation is a group of jump links that allow the user to quickly see and navigate to relevant sections of content on a page.

The wizard navigation is a custom component designed to funnel the user through a drill down tree to deliver them to a more detailed or personalized navigation link.

Accordions are a set of stacked headings that show and hide information in a small space.

Containers group similar components and can have a background color applied

Tabs organize content into sections and allow users to navigate between them.