data
Stat
One number with its label and context, such as lessons this week or open invoices.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A label, the value and a line of context.
Lessons this week
42
8 more than last week
<div class="ca-stat">
<p class="ca-stat__label">Lessons this week</p>
<p class="ca-stat__value">42</p>
<p class="ca-stat__description">8 more than last week</p>
</div>Examples
Group
Lay several stats out with Tailwind's grid utilities.
Students
128
12 started this month
Pass rate
74%
First attempt, last 12 months
Open invoices
€ 1,240
3 overdue
<div class="grid w-full gap-6 sm:grid-cols-3">
<div class="ca-stat">
<p class="ca-stat__label">Students</p>
<p class="ca-stat__value">128</p>
<p class="ca-stat__description">12 started this month</p>
</div>
<div class="ca-stat">
<p class="ca-stat__label">Pass rate</p>
<p class="ca-stat__value">74%</p>
<p class="ca-stat__description">First attempt, last 12 months</p>
</div>
<div class="ca-stat">
<p class="ca-stat__label">Open invoices</p>
<p class="ca-stat__value">€ 1,240</p>
<p class="ca-stat__description">3 overdue</p>
</div>
</div>Guidance and accessibility
When to use
- Use stats for the few numbers people check first on a dashboard or an overview.
- Give every number context: a period, a comparison or a goal.
- Write a change in words, such as “8 more than last week”. An arrow or a color alone does not say whether the change is good.
Accessibility
- The label comes before the value in the markup, so screen readers read “Lessons this week, 42”.
- Do not rely on color for up or down; the description says it.
- Write units and currencies in the value, such as “€ 1,240”.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-stat | Component | Stack of label, value and description. |
ca-stat__label | Part | What the number counts. |
ca-stat__value | Part | The number itself, with tabular figures. |
ca-stat__description | Part | Context, such as the change since last week. |
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.
Lessons this week
42
8 more than last week
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Lessons this week
42
8 more than last week
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Lessons this week
42
8 more than last week
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Lessons this week
42
8 more than last week
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>