Patterns / Onboarding
Pattern
Onboarding
The start grid, the empty companion slot, and the soft gate together.
<section>
<p class="label">Example data</p>
<div data-part="start-here"></div>
<div data-part="companion-card"></div>
<div data-part="soft-gate"></div>
</section>
The single-file button copies the composition with the stylesheet and script inlined.
When to use
- A first run introduces the product and a shortened list.
- The companion has no artwork yet.
When not to use
- The person is already in a task.
- The companion art is ready to draw. This slot would still be replaced, not decorated.
Components
| Component | Role |
|---|---|
| Start here | Eight numbered cards that name the first actions for this gallery. |
| Companion card | A speech card with a dismiss control. The artwork is an empty labelled slot. |
| Soft gate | A limit notice with one action that reveals the rest of the example list. |
Keyboard
| Key | Action |
|---|---|
| Enter | Dismisses the companion card or reveals the full list. |
Accessibility
- The companion slot keeps its pending label.
- The soft gate states 4 of 12.
Motion
- No extra motion.
Pattern origin
Composition: onboarding.