Components / Onboarding and feedback / Start here
F1 · Onboarding and feedback
Start here
Eight numbered cards that name the first actions for this gallery.
<article class="card c-start">
<span class="num">1</span>
<div><h3>Copy the stylesheet</h3><p>Place design/yravg-ui.css next to the page.</p></div>
</article>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A product has a short list of first actions.
- The order matters.
When not to use
- The steps are a form with validation.
- There is one action. Use a single button.
Usage
<article class="card c-start">
<span class="num">1</span>
<div><h3>Copy the stylesheet</h3><p>Place design/yravg-ui.css next to the page.</p></div>
</article>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| number | 1–8 | — | Order of the card. |
| title | text | — | The action. |
| body | one sentence | — | What the action means here. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the page. Cards are not controls. |
Accessibility
- Numbers are text, in order.
- Each card has a heading.
Motion
- No motion.
Pattern origin
Pattern type: a numbered start grid.