type
Heading
A heading style in four sizes, independent of the heading level.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Put the class on any heading level; the size modifier sets the look.
Plan a week of lessons
<h2 class="ca-heading ca-heading--lg">Plan a week of lessons</h2>Examples
Sizes
Pick the size by importance on the page, not by the heading level.
Extra large
Large
Medium
Small
<div class="grid gap-3">
<p class="ca-heading ca-heading--xl">Extra large</p>
<p class="ca-heading ca-heading--lg">Large</p>
<p class="ca-heading ca-heading--md">Medium</p>
<p class="ca-heading ca-heading--sm">Small</p>
</div>Guidance and accessibility
When to use
- Use the heading style when a heading should look different from its level,
such as an
<h2>that is the visual title of a page section. - Keep sizes consistent across a page: one size per level of importance.
Accessibility
- The level (
<h1>to<h6>) carries the structure for screen readers; the class only changes the look. Keep levels in order without skipping. - Long headings wrap in balanced lines.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-heading | Component | Display font, weight and wrapping for headings. |
ca-heading--xl | Size | Page titles. |
ca-heading--lg | Size | Section titles. |
ca-heading--md | Size | Sub-sections. |
ca-heading--sm | Size | Small titles, such as in panels. |
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.
Plan a week of lessons
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Plan a week of lessons
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Plan a week of lessons
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Plan a week of lessons
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>