layout
Section
A band of a page with space above and below, such as a part of a landing page.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Put a container inside, so the band spans the page while its content keeps a readable width.
How lessons work
Book a lesson, get picked up, and see your progress after every drive.
<section class="ca-section ca-section--sm w-full bg-(--ca-surface-muted)" aria-labelledby="section-title">
<div class="ca-container ca-container--sm">
<h2 class="ca-heading ca-heading--md" id="section-title">How lessons work</h2>
<p class="ca-text ca-text--md mt-2">Book a lesson, get picked up, and see your progress after every drive.</p>
</div>
</section>Examples
Guidance and accessibility
When to use
- Use sections to split a long page into bands, each with one topic.
- Alternate backgrounds with Tailwind utilities or tokens when bands need to stand apart.
Accessibility
- Use
<section>witharia-labelledbypointing at its heading, so the band is listed as a region. - Keep one heading per section, at the level that fits the page outline.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-section | Component | A full-width band; the space above and below comes from the size. |
ca-section--sm | Size | Compact band. |
ca-section--md | Size | Default band. |
ca-section--lg | Size | Generous band, for the main parts of a landing page. |
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.
How lessons work
Book a lesson, get picked up, and see your progress after every drive.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
How lessons work
Book a lesson, get picked up, and see your progress after every drive.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
How lessons work
Book a lesson, get picked up, and see your progress after every drive.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
How lessons work
Book a lesson, get picked up, and see your progress after every drive.
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>