type
Check list
A list of short items each led by an icon — feature bullets and pros and cons in marketing sections.
NewCSS onlyPlain classes; no JavaScript in any stack.
Usage
An unordered list; each item pairs an icon span with a text span.
- Pick-up at home, school or the station
- Reschedule up to a day before, in the app
- Progress tracked per skill, until the test
<ul class="ca-check-list">
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
<span class="ca-check-list__text">Pick-up at home, school or the station</span>
</li>
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
<span class="ca-check-list__text">Reschedule up to a day before, in the app</span>
</li>
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
<span class="ca-check-list__text">Progress tracked per skill, until the test</span>
</li>
</ul>Examples
Mixed tones
The icon decides the tone — a check for what is included, a cross for what is not.
- Motorway lessons included in every package
- Theory exam practice between lessons
- No lessons on Sundays or public holidays
<ul class="ca-check-list">
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
<span class="ca-check-list__text">Motorway lessons included in every package</span>
</li>
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
<span class="ca-check-list__text">Theory exam practice between lessons</span>
</li>
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12" /></svg></span>
<span class="ca-check-list__text">No lessons on Sundays or public holidays</span>
</li>
</ul>Guidance and accessibility
When to use
- Use a check-list for short parallel statements: what a plan includes, why a service fits, or where two options differ.
- Keep every item to a line or two; longer copy belongs in prose or a card.
- Pick the icon per item — a check, a cross or a dot — and let it carry the tone of the row.
Accessibility
- Mark the icons
aria-hiddenso screen readers only read the text. - Keep the element a real
ul(orolwhen order matters): assistive technology announces the item count and position.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-check-list | Component | The <ul> that lays the items out in rows. |
ca-check-list__item | Part | One row — an icon and its text, side by side. |
ca-check-list__icon | Part | The leading icon; give it an inline SVG and aria-hidden. |
ca-check-list__text | Part | The item's words. |
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.
- Pick-up at home, school or the station
- Reschedule up to a day before, in the app
- Progress tracked per skill, until the test
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
- Pick-up at home, school or the station
- Reschedule up to a day before, in the app
- Progress tracked per skill, until the test
Bloque skin
Example skin pushed far from base: square, heavy, offset shadows, larger targets.
- Pick-up at home, school or the station
- Reschedule up to a day before, in the app
- Progress tracked per skill, until the test
Pliego skin
Example skin from the press sheet: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
- Pick-up at home, school or the station
- Reschedule up to a day before, in the app
- Progress tracked per skill, until the test
Framework notes
Link the prebuilt stylesheet of your skin next to your brand stylesheet. No build step.
<link rel="stylesheet" href="brand.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your brand in your main stylesheet.
@import "tailwindcss";
@import "./brand.css";
@import "@usecalaca/ui/core.css";
@import "@usecalaca/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>