Components

Components are reusable building blocks used to create consistent experiences.

Components can be used alone or combined to create patterns. For more information, refer to Patterns.

Accordion

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

Breadcrumb

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

Button

Buttons can trigger an event, an action, or can take the user to another destination.

Carousel

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.

Container

Containers group similar components and can have a background color applied.

Content fragment

Content Fragment allows a content fragment asset, its elements and variations to be presented on a page.

Disclaimer modal

Disclaimer modals appear on page load and disable the page until the user takes an action.

Download

Download links to an asset for the user to download or view.

Embed

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.

Experience fragment

Experience Fragment allows an experience fragment variation to be presented on a page.

Forms

Forms are added by using the External App Container component to embed a Formstack script.

Image

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

Primary navigation

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

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

Separator

Separator shows a horizontal line on the page for dividing sections of content.

Tabs

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

Teaser

Teaser groups an image or icon, pretitle, title, and description for promoting content or linking to pages.

Tertiary navigation

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.

Text

Text is used for body text content.

Title

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

Wizard navigation

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.