type
Eyebrow
A short label above a section title, such as a chapter or a count.
NewCSS onlyPlain classes; no JavaScript in any stack.
Usage
An eyebrow is a short label above a heading. One or two words is enough.
Our story
How the project started
<div class="ca-stack ca-stack--sm">
<p class="ca-eyebrow">Our story</p>
<h2 class="ca-heading ca-heading--lg">How the project started</h2>
</div>Examples
Numbered
The number part carries the section count as a chip before the label.
01 Who I am
A designer who writes the code
<div class="ca-stack ca-stack--sm">
<p class="ca-eyebrow"><span class="ca-eyebrow__number">01</span> Who I am</p>
<h2 class="ca-heading ca-heading--lg">A designer who writes the code</h2>
</div>Guidance and accessibility
When to use
- Use an eyebrow for the label that names a section before its heading, such as a chapter word or a count.
- Keep the label to one or two words. For a status or category on an item, use a badge instead.
- The number part is optional; leave it out when sections have no order.
Accessibility
- An eyebrow is plain text. Put it before the heading it introduces and let the heading carry the structure; do not make the eyebrow a heading itself.
- A number chip is decorative numbering. Keep the label meaningful without it, so the section still reads well when the count is skipped.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-eyebrow | Component | The label row, uppercase and tracked in most skins. |
ca-eyebrow__number | Part | An optional chip before the label, for the section count. |
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.
Our story
How the project started
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Our story
How the project started
Bloque skin
Example skin pushed far from base: square, heavy, offset shadows, larger targets.
Our story
How the project started
Pliego skin
Example skin from the press sheet: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Our story
How the project started
Framework notes
Link the prebuilt stylesheet of your skin next to your brand stylesheet. No build step.
<link rel="stylesheet" href="brand.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your brand in your main stylesheet.
@import "tailwindcss";
@import "./brand.css";
@import "@usecalaca/ui/core.css";
@import "@usecalaca/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>