Callouts
Four tones, all built from the same primitive.
Note
Neutral information the reader should keep in mind.
Tip
A faster or smarter way to complete the task.
Warning
Something that can cause data loss or a rejected listing.
Good to know
A positive confirmation or a best-practice note.
Code
Use InlineCode inside prose and the block below for anything multi-line.
export default function Example() {
return <H2>Hello</H2>;
}Tables
| Component | Use it for | Status |
|---|---|---|
| Callout | Inline emphasis | Stable |
| CodeBlock | Snippets | Stable |
| Steps | Sequential tasks | Beta |
Cards
Linked card
Navigates elsewhere.
Static card
Presentational only.
Images
Screenshot placeholder
Expandable sections
Badges
Neutral New Stable Beta Deprecated
Step-by-step blocks
First step
Description of the action.Second step
Description of the action.Third step
Description of the action.
Keyboard shortcuts
Open documentation search⌘+K
Open documentation search (Windows)Ctrl+K
Dismiss dialogsEsc
Typography
Heading level three
Body copy renders at 15px with generous line height for long reading sessions.
- Bulleted list item with a brass marker.
- Second item.