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.