type
Icon
An inline SVG that sits on the text baseline and scales with the surrounding font size.
NewCSS onlyPlain classes; no JavaScript in any stack.
Usage
The icon takes the surrounding text size and color, so it reads as part of the sentence.
Lesson published just now
Reminder set for tomorrow at 9:00
<div class="flex flex-col items-start gap-3">
<p>
<svg class="ca-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
Lesson published just now
</p>
<p>
<svg class="ca-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>
Reminder set for tomorrow at 9:00
</p>
</div>Examples
Sizes
Sizes are set in ems, so the same icon grows when the text around it is larger.
A heading grows the icon with it
<div class="flex flex-col items-center gap-6">
<div class="flex items-end gap-4">
<svg class="ca-icon ca-icon--sm" aria-label="Small" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7M12 19V5" /></svg>
<svg class="ca-icon" aria-label="Default" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7M12 19V5" /></svg>
<svg class="ca-icon ca-icon--lg" aria-label="Large" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7M12 19V5" /></svg>
<svg class="ca-icon ca-icon--xl" aria-label="Extra large" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7M12 19V5" /></svg>
</div>
<h3 class="mt-6 text-2xl">
<svg class="ca-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
A heading grows the icon with it
</h3>
</div>Guidance and accessibility
When to use
- Put
ca-iconon any inline<svg>so it behaves like a glyph: sized in ems, on the baseline, never shrinking inside a flex row. - Because the size is relative, an icon inside a heading or a large button scales with it — no extra class needed per context.
- The icon inherits
currentColor; color it through the text color of its parent.
Accessibility
- Give decorative icons
aria-hidden="true"so screen readers skip them. - A meaningful icon needs a name — on an icon-only button that is the
aria-labelon the button; a standalone informational icon getsrole="img"and anaria-labelof its own.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-icon | Component | The SVG; sized to the font and aligned to the text baseline. |
ca-icon--sm | Size | Slightly smaller than the surrounding text. |
ca-icon--lg | Size | A larger icon, such as in a button or lead paragraph. |
ca-icon--xl | Size | The largest preset, for headings and hero marks. |
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.
Lesson published just now
Reminder set for tomorrow at 9:00
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Lesson published just now
Reminder set for tomorrow at 9:00
Bloque skin
Example skin pushed far from base: square, heavy, offset shadows, larger targets.
Lesson published just now
Reminder set for tomorrow at 9:00
Pliego skin
Example skin from the press sheet: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Lesson published just now
Reminder set for tomorrow at 9:00
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>