navigation
Stepper
Shows where people are in a process of a few steps, such as booking a lesson.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
An ordered list in a <nav>. Each step has data-status; the current one also aria-current="step".
<nav aria-label="Booking steps" class="w-full">
<ol class="ca-stepper ca-stepper--horizontal">
<li class="ca-stepper__item" data-status="complete">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Lesson type <span class="sr-only">(done)</span></span>
</li>
<li class="ca-stepper__item" data-status="current" aria-current="step">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Date and time</span>
</li>
<li class="ca-stepper__item" data-status="upcoming">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Pick-up</span>
</li>
<li class="ca-stepper__item" data-status="upcoming">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Confirm</span>
</li>
</ol>
</nav>Examples
Vertical
ca-stepper--vertical puts the label beside the marker and has room for a description.
<nav aria-label="Licence steps" class="w-full max-w-sm">
<ol class="ca-stepper ca-stepper--vertical">
<li class="ca-stepper__item" data-status="complete">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Trial lesson <span class="sr-only">(done)</span></span>
<span class="ca-stepper__description">2 September</span>
</li>
<li class="ca-stepper__item" data-status="complete">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Theory exam <span class="sr-only">(done)</span></span>
<span class="ca-stepper__description">Passed on 14 October</span>
</li>
<li class="ca-stepper__item" data-status="current" aria-current="step">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Driving lessons</span>
<span class="ca-stepper__description">24 of about 35 lessons</span>
</li>
<li class="ca-stepper__item" data-status="upcoming">
<span class="ca-stepper__marker" aria-hidden="true"></span>
<span class="ca-stepper__label">Driving test</span>
<span class="ca-stepper__description">Booked when you are ready</span>
</li>
</ol>
</nav>Guidance and accessibility
When to use
- Use a stepper in a process of three to six steps that people go through in order, such as a booking or a sign-up.
- Keep labels to one or two words.
- For a process described on a marketing page, use the steps block.
Accessibility
- Put the list in a
<nav>with anaria-label, and mark the current step witharia-current="step". - The marker is decoration; hide it with
aria-hidden="true". Say that a step is done in words, such as a visually hidden “(done)”. - State shows through the marker’s fill and the check, not color alone.
- Make complete steps links when people may go back to them.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-stepper | Component | The <ol> of steps. Add one layout. |
ca-stepper__item | Part | One step, with data-status="complete", "current" or "upcoming". |
ca-stepper__marker | Part | The number, or a check when the step is complete. Leave it empty. |
ca-stepper__label | Part | The name of the step. |
ca-stepper__description | Part | Optional detail, such as a date. |
ca-stepper--horizontal | Layout | Steps in a row that wraps. |
ca-stepper--vertical | Layout | One step per row, label beside the marker. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>