Components
Access code, usage, and guidelines for our basic building blocks
-
Accordion
Reveal and hide two or more sections of content
-
Ad Flag
Clearly communicate ad attribution for consumer transparency
-
Badge
Highlight and inform an element's characteristic, status or feature
-
Breadcrumb
View location within a path of navigation
-
Button
Perform a single, clearly communicated action
-
Caption
Succinctly describe an image, illustration or video
-
Card
Isolated content preview
-
Disclaimer
Inform users of specific points of liability
-
Filter
Represent a list of criteria that can be added or removed
-
Form module
Bring attention to a particular form or communication method
-
Forms - Checkbox
Select options from a list of choices
-
Forms - Input
Enter character-based information
-
Forms - Radio
Select a single option from a list of mutually exclusive options
-
Forms - Select
Select a single option from a list
-
Forms - Switch
Toggles and range inputs for binary and multi-select values.
-
Headshot
A graphic representation of an individual
-
Hero
A prominent banner area that presents an overview of the page or section.
-
Link
Navigate within or outside current context with text
-
Link pack
SEO-focused link lists for content-crawling and keyword repetition
-
List
Group together a series of related text items
-
Modal
Present focused content in a user-initiated overlay
-
Notification
Communicate information or a state of the system
-
Pagination
Navigate a series of sequential pages
-
Rating
Communicate an opinion on an ascending scale
-
Reveal
Reveal and hide a section of content
-
Save
Save or favorite an item
-
Separator
Visually separate areas of content
-
Tabs
Alternate between content views
-
Tag
Categorize information using descriptive keywords/labels
-
Tooltip
Provide supplemental information about a UI element