Block
Comparison
A heading and panels set against each other — before and after, us and them.
NewOne structure; the parts wrap as the container allows.
Examples
Before and after
Two panels of ca-check-list items: the paper diary versus the app.
The paper diary or the app
What changes when a driving school moves its planning online.
Paper diary
- Students phone to move a lesson
- Double bookings found at the kerb
The app
- Students reschedule up to a day before
- Every booking visible to the whole team
<section class="ca-comparison w-full" aria-labelledby="comparison-title">
<div class="ca-comparison__header">
<h2 class="ca-comparison__title" id="comparison-title">The paper diary or the app</h2>
<p class="ca-comparison__lead">What changes when a driving school moves its planning online.</p>
</div>
<div class="ca-comparison__panels">
<div class="ca-comparison__panel">
<h3 class="ca-comparison__panel-title">Paper diary</h3>
<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="M18 6 6 18M6 6l12 12" /></svg></span>
<span class="ca-check-list__text">Students phone to move a lesson</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">Double bookings found at the kerb</span>
</li>
</ul>
</div>
<div class="ca-comparison__panel">
<h3 class="ca-comparison__panel-title">The app</h3>
<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">Students reschedule up to a day before</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">Every booking visible to the whole team</span>
</li>
</ul>
</div>
</div>
</section>Guidance and accessibility
When to use
- Use a comparison when the reader weighs two options: before and after, with or without, package A and B.
- Give both panels the same shape — same heading level, same list length — so the difference is the content, not the layout.
- Compose the panels from elements such as
ca-check-list; which side is highlighted is a host decision.
Accessibility
- Give the section an
aria-labelledbypointing at the title. - Do not mark the favoured side with color alone — let the copy say which option wins.
Classes
Generated from the block contract. Layouts are part of the core, so every skin gets all of them.
| Class | Kind | Use it for |
|---|---|---|
ca-comparison | Block | Section with the header and the panels; they wrap as the container allows. |
ca-comparison__header | Part | Title and lead above the panels. |
ca-comparison__title | Part | Heading of the block. |
ca-comparison__lead | Part | One sentence framing the comparison. |
ca-comparison__panels | Part | The row that holds the panels. |
ca-comparison__panel | Part | One side of the comparison. |
ca-comparison__panel-title | Part | What the panel stands for. |
Skins
The same markup, dressed by each skin. The arrangement stays; spacing, type and color change.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
The paper diary or the app
What changes when a driving school moves its planning online.
Paper diary
- Students phone to move a lesson
- Double bookings found at the kerb
The app
- Students reschedule up to a day before
- Every booking visible to the whole team
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
The paper diary or the app
What changes when a driving school moves its planning online.
Paper diary
- Students phone to move a lesson
- Double bookings found at the kerb
The app
- Students reschedule up to a day before
- Every booking visible to the whole team
Bloque skin
Example skin pushed far from base: square, heavy, offset shadows, larger targets.
The paper diary or the app
What changes when a driving school moves its planning online.
Paper diary
- Students phone to move a lesson
- Double bookings found at the kerb
The app
- Students reschedule up to a day before
- Every booking visible to the whole team
Pliego skin
Example skin from the press sheet: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
The paper diary or the app
What changes when a driving school moves its planning online.
Paper diary
- Students phone to move a lesson
- Double bookings found at the kerb
The app
- Students reschedule up to a day before
- Every booking visible to the whole team
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>