Block
Cta
A short message and the action that follows it, usually near the end of a page.
2 layoutsOne structure; add one layout modifier to pick the arrangement.
Centered layout
ca-cta--centered: One centred column. For the closing message of a page.
Trial
One title, one sentence and one action.
Try it with your school for a month
Free for 30 days, with your own students and cars. No card needed.
<section class="ca-cta ca-cta--centered w-full" aria-labelledby="cta-trial-title">
<div class="ca-cta__content">
<h2 class="ca-cta__title" id="cta-trial-title">Try it with your school for a month</h2>
<p class="ca-cta__lead">Free for 30 days, with your own students and cars. No card needed.</p>
</div>
<div class="ca-cta__actions">
<a class="ca-button ca-button--primary ca-button--lg" href="#start">Start a free trial</a>
</div>
</section>Split layout
ca-cta--split: Message at the start, actions at the end; one column when narrow. For a band between sections.
Demo
A main action and a quieter second one.
See it with your own week
A 20-minute call where we plan your real lessons together.
<section class="ca-cta ca-cta--split w-full" aria-labelledby="cta-demo-title">
<div class="ca-cta__content">
<h2 class="ca-cta__title" id="cta-demo-title">See it with your own week</h2>
<p class="ca-cta__lead">A 20-minute call where we plan your real lessons together.</p>
</div>
<div class="ca-cta__actions">
<a class="ca-button ca-button--primary ca-button--lg" href="#demo">Book a call</a>
<a class="ca-button ca-button--ghost ca-button--lg" href="#pricing">See pricing</a>
</div>
</section>Guidance and accessibility
When to use
- Use a call to action where people have read enough to decide, such as at the end of a landing page.
- Name the action in the button: “Start a free trial”, not “Learn more”.
Accessibility
- Label the section with its title through
aria-labelledby. - Actions that go to another page are links with
ca-button.
Classes
Generated from the block contract. Layouts are part of the core, so every skin gets all of them.
| Class | Kind | Use it for |
|---|---|---|
ca-cta | Block | Section with the message and actions. Add one layout. |
ca-cta__content | Part | Wrapper for the title and lead. |
ca-cta__title | Part | The message, as a heading. |
ca-cta__lead | Part | One sentence that removes a doubt, such as the price or the time it takes. |
ca-cta__actions | Part | Row of links or buttons, the main one first. |
ca-cta--centered | Layout | One centred column. |
ca-cta--split | Layout | Message and actions side by side. |
Skins
The same markup, dressed by each skin. The arrangement stays; spacing, type and color change.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Try it with your school for a month
Free for 30 days, with your own students and cars. No card needed.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Try it with your school for a month
Free for 30 days, with your own students and cars. No card needed.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Try it with your school for a month
Free for 30 days, with your own students and cars. No card needed.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Try it with your school for a month
Free for 30 days, with your own students and cars. No card needed.
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>