type
Prose
Styles long-form content written in plain HTML, such as articles and guides.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Put ca-prose on the element around the content. Headings, paragraphs, lists, links, quotes and code inside it are styled without classes.
Your first lesson
Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.
- Getting to know the car
- Starting, steering and stopping
- A short drive on quiet roads
Most students drive on a real road within twenty minutes.
Questions? Search for first lesson in the app.
<article class="ca-prose">
<h2>Your first lesson</h2>
<p>Your instructor picks you up at the address you chose. Bring your <a href="#licence">provisional licence</a> and glasses if you need them.</p>
<ul>
<li>Getting to know the car</li>
<li>Starting, steering and stopping</li>
<li>A short drive on quiet roads</li>
</ul>
<blockquote>Most students drive on a real road within twenty minutes.</blockquote>
<p>Questions? Search for <code>first lesson</code> in the app.</p>
</article>Examples
Guidance and accessibility
When to use
- Use prose for content from Markdown or a CMS, where you cannot add classes to every element.
- Keep components out of prose, or give them their own classes; prose styles only plain elements.
Accessibility
- Prose keeps lines near 70 characters and adds space between blocks, so long text is easy to follow.
- Links are underlined, so they do not rely on color.
- Every rule sits in
:where(), so a utility on one element always wins.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-prose | Component | Readable line length and styles for the HTML inside: headings, lists, links, quotes and code. |
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.
Your first lesson
Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.
- Getting to know the car
- Starting, steering and stopping
- A short drive on quiet roads
Most students drive on a real road within twenty minutes.
Questions? Search for first lesson in the app.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Your first lesson
Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.
- Getting to know the car
- Starting, steering and stopping
- A short drive on quiet roads
Most students drive on a real road within twenty minutes.
Questions? Search for first lesson in the app.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Your first lesson
Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.
- Getting to know the car
- Starting, steering and stopping
- A short drive on quiet roads
Most students drive on a real road within twenty minutes.
Questions? Search for first lesson in the app.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Your first lesson
Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.
- Getting to know the car
- Starting, steering and stopping
- A short drive on quiet roads
Most students drive on a real road within twenty minutes.
Questions? Search for first lesson in the app.
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>