type
Link
An inline link in running text, underlined by the skin and animated on hover and focus.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Put the class on an <a> inside a paragraph or list.
Read the installation guide first, then browse the component pages for the classes you need.
<p class="ca-text ca-text--md max-w-prose">
Read the <a class="ca-link" href="https://example.com/guide">installation guide</a> first, then
browse the <a class="ca-link" href="https://example.com/components">component pages</a> for the
classes you need.
</p>Examples
Inside prose
Prose already underlines plain anchors; ca-link upgrades them with the skin's animated underline.
Every guide links onward: start with the theming guide to learn the tokens, then read how skins work before writing your own.
<div class="ca-prose">
<p>
Every guide links onward: start with the
<a class="ca-link" href="https://example.com/theming">theming guide</a> to learn the tokens, then
read <a class="ca-link" href="https://example.com/skins">how skins work</a> before writing your own.
</p>
</div>Guidance and accessibility
When to use
- Use
ca-linkfor anchors inside running text: paragraphs, list items, captions. It is the content link, not a button. - Inside
ca-prose, plain<a>elements already get an underline; addca-linkto get the animated version. - For navigation (menus, breadcrumbs, pagination) use the dedicated components instead.
Accessibility
- Keep a real
<a href>; the class adds no behavior of its own. - The underline stays visible at rest, so the link does not depend on hover or color alone.
- Hover and keyboard focus share the same feedback through the
interactstate, and the core keeps the shared focus ring.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-link | Component | The link itself: foreground text, an underline that thickens and takes the accent on hover and focus. |
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.
Read the installation guide first, then browse the component pages for the classes you need.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Read the installation guide first, then browse the component pages for the classes you need.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Read the installation guide first, then browse the component pages for the classes you need.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Read the installation guide first, then browse the component pages for the classes you need.
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>