layout
Stack
Puts children in a column with even space between them.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A stack spaces its children evenly; the size picks how much.
First lesson planned
Theory exam booked
Interim test on 25 November
<div class="ca-stack ca-stack--md w-full max-w-sm">
<div class="ca-alert ca-alert--neutral"><p class="ca-alert__title">First lesson planned</p></div>
<div class="ca-alert ca-alert--neutral"><p class="ca-alert__title">Theory exam booked</p></div>
<div class="ca-alert ca-alert--neutral"><p class="ca-alert__title">Interim test on 25 November</p></div>
</div>Examples
Sizes
The skin sets each size, so every product keeps its own rhythm.
<div class="grid w-full gap-6 sm:grid-cols-3">
<div class="ca-stack ca-stack--sm"><span class="ca-badge ca-badge--neutral">Small</span><span class="ca-badge ca-badge--neutral">space</span></div>
<div class="ca-stack ca-stack--md"><span class="ca-badge ca-badge--neutral">Medium</span><span class="ca-badge ca-badge--neutral">space</span></div>
<div class="ca-stack ca-stack--lg"><span class="ca-badge ca-badge--neutral">Large</span><span class="ca-badge ca-badge--neutral">space</span></div>
</div>Guidance and accessibility
When to use
- Use a stack for content that reads top to bottom, such as form fields, cards in a list or sections of a panel.
- Nest stacks: a large stack between groups, a small one inside each group.
Accessibility
- A stack only adds space. The order in the markup is the reading order; do not reorder children with CSS.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-stack | Component | A column; the space between children comes from the size. |
ca-stack--sm | Size | Tight space, for related items. |
ca-stack--md | Size | Default space. |
ca-stack--lg | Size | Wide space, between groups. |
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.
First lesson planned
Theory exam booked
Interim test on 25 November
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
First lesson planned
Theory exam booked
Interim test on 25 November
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
First lesson planned
Theory exam booked
Interim test on 25 November
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
First lesson planned
Theory exam booked
Interim test on 25 November
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>