Page
Hero
The opening of a page.
PageHeader
An app page's title, actions and way back.
CtaBanner
A closing call to action.
Announcement
A slim bar for news.
Alert
A notice set into the page.
SiteHeader
Brand, navigation and actions.
SiteFooter
Fine print and columns of links.
Credit
An easy attribution line.
Content
Card
A bordered panel of short content.
MediaCard
A card led by an image.
FeatureGrid
Features divided by hairlines.
Steps
A numbered sequence.
PairList
Rows setting one thing against another.
DetailList
Labelled facts about one thing.
PostList
Linked entries, such as blog posts.
Accordion
Expanding sections, without JavaScript.
Testimonial
A quotation, and who said it.
LogoCloud
Client and partner logos.
Prose
Long-form content and rendered Markdown.
RichText
A stored document, rendered without an editor.
Figure
An image with a caption.
ScreenFrame
A screenshot of an app, in a window.
Table
Rows of data under headings.
Terminal
Shell commands in a window.
CodeBlock
Source code, with a copy button.
Tabs
Panels behind a row of tabs.
Controls
Button
Buttons, and links styled as them.
Chip
Compact toggles, for filters.
SegmentedControl
One of a few options.
Field
Labelled inputs, textareas and selects.
Combobox
A text input that suggests options as you type.
RichTextEditor
Formatted writing, stored as a document.
RepeatingField
Rows of fields to add, remove and reorder.
Switch
An on/off setting.
ThemeToggle
Light, dark or the system's; and palettes.
Navigation
TableOfContents
The page's sections, tracking the reader.
Pager
Previous and next pages.
Drawer
A panel sliding in from the side.
Dialog
A modal, and a confirmation.
Effects
ParticleField
A drifting particle background.
Pattern
Background textures that follow the theme.
CursorEffects
Themed cursors, and an effect around the pointer.
GlowTracker
Frosted glass, and a light that follows the pointer.