Skip to main content

Components

Accordion

Accordions are vertically stacked sections of headings and content. Accordions can be expanded and collapsed to reveal their content.

Breadcrumbs

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

Button

A button allows the user to take an action or trigger an event.

Callout

A callout is a display text style that emphasizes a short line of text. Callouts are different from headings and are used for marketing content.

Card group

The card group component allows multiple cards to be organized together.

Checkbox

A checkbox represents a binary selection. A checkbox group allows the user to select one or more options from a small list.

Content card

Content cards are containers for organizing related content and calls to action. The card’s two required elements are the card title and card description.

Dropdown menu

A dropdown menu contains a list of actions or navigation items that are shown in an expandable menu.

Fieldset

Fieldsets are used to group one or more form controls under one legend.

Footer

The footer lives at the bottom of the page and contains company branding, legal text and links, and copyright information. It can also contain navigational links, social media links, or cookie customization.

Form

A form is made up of related form controls that allow the user to enter, select, and submit information.

Image

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

Link

A link allows the user to navigate to another page, an external page, or another section on the same page.

Modal

A modal is a container that appears in front of, and disables, all page content. Modals contain text or other interactive elements that often prompt the user to take action before continuing.

Pagination

Pagination shows data or search results split up into pages.

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.

Product card

Product cards are containers for organizing product information. The card’s two required elements are the card title and card description. This card type will always be linked.

Radio group

A radio button allows the user to select one option from a small list. Radio buttons are used for mutually exclusive options.

Ribbon

Ribbons are a form of messaging that offer more information about the page content. They give the user more information about an element or elements on the page. Ribbons can also provide more actions that the user can perform on the page.

Search

Search allows users to enter a word or a phrase to find specific information or navigational links without using the main navigation.

Secondary navigation

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

Select

A select allows the user to choose one option from an expandable list of options.

Skip link

Skip links allow users who rely on assistive technologies to skip to key places on the page.

Stoplight

Stoplight text styles indicate a safety, caution, or danger status.

Tabs

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

Tag

A tag is a non-interactive text style that groups related content into categories.

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 input

A text input allows the user to enter a value or a short line of text into a field. Text inputs usually appear as part of a form.

Textarea

A textarea allows the user to enter multiple lines of text into a field. Textareas usually appear as part of a form.

Wizard navigation

The wizard 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.