Design system

Components

Accordion
An accordion is a list of headers that hide or reveal additional content when selected.
In use
Alerts
Messaging that keeps users informed of important and sometimes time-sensitive changes. There are three types of Alerts: Sitewide, Regional, and inline.
In use
Button group
A button group collects similar or related actions.
In use
Card
Cards contain content and actions about a single subject.
Draft: Do not use
Checkbox
Checkboxes allow users to select one or more options from a list.
In use
Footer
A footer serves site visitors who arrive at the bottom of a page without finding what they want.
In use
Header
The header helps users identify where they are and provides a quick, organized way to reach the main content of a website.
Draft: Do not use
Icon
Icons help communicate meaning, actions, status, or feedback.
In use
In-page navigation (jump List)
The in-page navigation allows a read to jump to specific sections on a lengthy page of content.
In use
Link
Links are navigational elements that direct visitors to other locations, either on the same page or to a different page or site.
In use
Links as buttons
CHRISTOPHER: I'm not sure what to say about this. - Amber
In use
List
A list organizes information into discrete sections.
In use
Modal
A modal disables page content and focuses the user’s attention on a single task or message. (Virgo only)
Testing
Pagination
Pagination is navigation for paginated content.
In use
Prose
Format a block of running text.
In use
Radio buttons
Radio buttons allow users to select exactly one choice from a group.
In use
Search (bar)
Search allows users to search for specific content, as opposed to browsing.
In use
Select
A select component allows users to choose one option from a temporary modal menu.
In use
Side navigation
Hierarchical, vertical navigation on the side of a page.
In use
Summary box
A summary box highlights key information from a longer page or displays next steps.
Draft: Do not use
Table
A table shows data in columns and rows.
In use
Tooltip
A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.
Draft: Do not use
Typography
Clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. Default typefaces are designed for legibility and can adapt to a variety of visual tones.
In use
Validation
Stating validation requirements up front, with live feedback, means users won’t be left guessing.
In use

Utilities