type
Text
Body text in three sizes.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Paragraph text with comfortable line height.
Every student gets the new lesson times on their phone, so nobody has to call to check.
<p class="ca-text ca-text--md max-w-prose">Every student gets the new lesson times on their phone, so nobody has to call to check.</p>Examples
Sizes
Large for introductions, medium for most text, small for notes.
Large text, for an introduction.
Medium text, for most paragraphs.
Small text, for notes and captions.
<div class="grid max-w-prose gap-3">
<p class="ca-text ca-text--lg">Large text, for an introduction.</p>
<p class="ca-text ca-text--md">Medium text, for most paragraphs.</p>
<p class="ca-text ca-text--sm">Small text, for notes and captions.</p>
</div>Guidance and accessibility
When to use
- Use text classes for paragraphs outside prose, such as a lead under a heading or a caption under a card.
- For articles and guides written in plain HTML or Markdown, use prose.
Accessibility
- Keep lines between about 45 and 75 characters; the examples use Tailwind’s
max-w-prose. - Small text stays at least 14 pixels; do not use it for long passages.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-text | Component | Body text color and wrapping. |
ca-text--sm | Size | Small text, for notes and captions. |
ca-text--md | Size | Default body text. |
ca-text--lg | Size | Larger text, for introductions. |
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.
Every student gets the new lesson times on their phone, so nobody has to call to check.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Every student gets the new lesson times on their phone, so nobody has to call to check.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Every student gets the new lesson times on their phone, so nobody has to call to check.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Every student gets the new lesson times on their phone, so nobody has to call to check.
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>