layout
Separator
A thin line between groups of content.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
An <hr> with the horizontal variant between two groups.
Lessons this month: 12
Open invoices: 2
<div class="grid w-full max-w-sm gap-3">
<p>Lessons this month: 12</p>
<hr class="ca-separator ca-separator--horizontal" />
<p>Open invoices: 2</p>
</div>Examples
Vertical
Between items in a row, use the vertical variant with role="separator" and aria-orientation="vertical".
<div class="flex h-6 items-center gap-3 text-sm">
<a href="#profile">Profile</a>
<span class="ca-separator ca-separator--vertical" role="separator" aria-orientation="vertical"></span>
<a href="#billing">Billing</a>
<span class="ca-separator ca-separator--vertical" role="separator" aria-orientation="vertical"></span>
<a href="#help">Help</a>
</div>Guidance and accessibility
When to use
- Use a separator where space alone does not show that two groups are different.
- Prefer spacing first. Lines everywhere make a page look busy.
Accessibility
- An
<hr>is announced as a separator. When the line is only decoration, use a<span>without a role instead. - A vertical separator needs
role="separator"andaria-orientation="vertical"when it marks a real boundary.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-separator | Component | The line. Add one variant. |
ca-separator--horizontal | Variant | A full-width line between stacked content. |
ca-separator--vertical | Variant | A line between items in a row, as tall as the row. |
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.
Lessons this month: 12
Open invoices: 2
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Lessons this month: 12
Open invoices: 2
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Lessons this month: 12
Open invoices: 2
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Lessons this month: 12
Open invoices: 2
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>