Components

Components are interactive building blocks of our design system. Each component was created to meet a specific UI and accessibility need. Components should be used harmoniously together in the same space to create more intuitive user interfaces and experiences.

Accordion

Accordion

Toggles the visibility of multiple content panels

Alert

Alert

Notifies a user without blocking their workflow

Announcement

Announcement

Displays an important message across web properties

Audio player

Audio player

Plays and controls audio clips in a web browser

avatar

Avatar

Replaces a photo or image not submitted by a user

Button

Button

Performs an action in the background when triggered

Call to action

Call to action

Directs a user to other pages or displays extra content

Card

Card

Organizes content or media in various container sizes

Disclosure

Disclosure

Toggles the visibility of only one content panel

Filter

Filter

Sorts a data set by predetermined sections and tags

Form

Form

Collects specific information from a user through inputs

Jump links

Jump links

Moves a user to specific content when a link is selected

Link

Link

Directs a user to another domain, page, or location

Link with icon

Link with icon

Adds additional context or decoration to an inline link

Modal

Modal

Displays content or helps a user focus on a specific task

Navigation

Navigation (primary)

Organizes links representing global web properties

Progress steps

Progress steps

Guides a user through a task with sequential steps

Promo

Promo

Advertises a specific promotional message or offer

Quote

Quote

Styles a customer quote and includes attribution

Search bar

Search bar

Performs a search and displays relevant content

Skip navigation

Skip navigation

Moves a user down to content by keyboard input

Sticky banner

Sticky banner

Anchors an offer to the bottom edge of a page

Sticky card

Sticky card

Anchors an offer to the right edge of a page

Tabs

Tabs

Arranges content in a contained view on the same page

Tooltip

Tooltip

Toggles a small overlay of text only on hover or focus

Video thumbnail

Video thumbnail

Overlays a button on an image indicating video playback


To give feedback about anything on this page or to request a new Component, contact us.

To learn more about how to use foundational elements, visit the Foundations section.