layout
Container
Centres content at a readable maximum width, with space at the sides.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A size sets the maximum width: sm for reading, md for most pages, lg for wide layouts. The dashed line shows the full width.
This text sits in a small container: centred, with space at the sides, and never wider than 42rem.
<div class="w-full border border-dashed border-(--ca-border-default)">
<div class="ca-container ca-container--sm">
<p>This text sits in a small container: centred, with space at the sides, and never wider than 42rem.</p>
</div>
</div>Examples
Guidance and accessibility
When to use
- Use a container inside full-width sections, so content keeps a readable width on large screens while the section background spans the page.
- Use the small size for text-heavy pages.
Accessibility
- A container only sets width and space; it adds no meaning. Use landmarks
such as
<main>and<section>around it as the page needs. - Lines of text stay readable: the small size keeps them near 70 characters.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-container | Component | Centred block, full width up to its maximum, with space at the sides. |
ca-container--sm | Size | Up to 42rem, for text. |
ca-container--md | Size | Up to 64rem. |
ca-container--lg | Size | Up to 80rem. |
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.
This text sits in a small container: centred, with space at the sides, and never wider than 42rem.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
This text sits in a small container: centred, with space at the sides, and never wider than 42rem.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
This text sits in a small container: centred, with space at the sides, and never wider than 42rem.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
This text sits in a small container: centred, with space at the sides, and never wider than 42rem.
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>