layout
Card
Groups related content and actions on one surface.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A card needs the component class; title and description are optional parts.
Lessons this week
Three lessons are planned. You can move a lesson up to 24 hours before it starts.
<article class="ca-card max-w-sm">
<h3 class="ca-card__title">Lessons this week</h3>
<p class="ca-card__description">Three lessons are planned. You can move a lesson up to 24 hours before it starts.</p>
</article>Examples
With actions
Put buttons in ca-card__footer, the main action first.
Invite your team
Members can plan lessons and see every student's progress.
<article class="ca-card max-w-sm">
<h3 class="ca-card__title">Invite your team</h3>
<p class="ca-card__description">Members can plan lessons and see every student's progress.</p>
<div class="ca-card__footer">
<button class="ca-button ca-button--primary ca-button--md" type="button">Send invites</button>
<button class="ca-button ca-button--ghost ca-button--md" type="button">Not now</button>
</div>
</article>In a grid
Cards stretch to their grid cell. Lay them out with Tailwind's grid utilities.
Theory exam
Practice 40 questions in the format of the real exam.
Driving test
Book your test once your instructor marks you ready.
<div class="grid w-full gap-4 sm:grid-cols-2">
<article class="ca-card">
<h3 class="ca-card__title">Theory exam</h3>
<p class="ca-card__description">Practice 40 questions in the format of the real exam.</p>
</article>
<article class="ca-card">
<h3 class="ca-card__title">Driving test</h3>
<p class="ca-card__description">Book your test once your instructor marks you ready.</p>
</article>
</div>Guidance and accessibility
When to use
- Use a card to group content that belongs together, such as a lesson, an invoice or a setting.
- Keep one main action per card. Several cards that each shout “primary” compete for attention.
- A whole card that links somewhere is easier to use with one link on the
title than with the card wrapped in an
<a>.
Accessibility
- Use an element that fits the content:
<article>for standalone items,<section>with a heading for parts of a page. ca-card__titlestyles text; it does not choose a heading level. Pick the level that follows the headings around the card.- Content order in the markup is the reading order. Do not reorder visually with CSS in ways that change meaning.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-card | Component | Vertical stack with the card surface, edge and spacing. |
ca-card__title | Part | Heading of the card. Use the heading level that fits the page outline. |
ca-card__description | Part | Supporting text below the title. |
ca-card__footer | Part | Row of actions that wraps on narrow screens. |
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
Three lessons are planned. You can move a lesson up to 24 hours before it starts.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Lessons this week
Three lessons are planned. You can move a lesson up to 24 hours before it starts.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Lessons this week
Three lessons are planned. You can move a lesson up to 24 hours before it starts.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Lessons this week
Three lessons are planned. You can move a lesson up to 24 hours before it starts.
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>