Block
Split
Content beside media — the recurring "story next to a screenshot" section.
New2 layoutsOne structure; add one layout modifier to pick the arrangement.
Media End layout
ca-split--media-end: Content first, media at the end; one column when narrow.
Media at the end
The same markup; only the layout class differs.
For busy students
Lessons that fit around your day
Book in the app, get picked up where you are and track every skill until the test.
- Evening and weekend slots
- Same instructor every lesson
Next lesson
Friday 16:00 — city centre practice with Noor, pick-up at the library.
<section class="ca-split ca-split--media-end w-full" aria-labelledby="split-end-title">
<div class="ca-split__content">
<p class="ca-split__eyebrow">For busy students</p>
<h2 class="ca-split__title" id="split-end-title">Lessons that fit around your day</h2>
<p class="ca-split__lead">Book in the app, get picked up where you are and track every skill until the test.</p>
<ul class="ca-check-list">
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" 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></span>
<span class="ca-check-list__text">Evening and weekend slots</span>
</li>
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" 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></span>
<span class="ca-check-list__text">Same instructor every lesson</span>
</li>
</ul>
</div>
<div class="ca-split__media">
<article class="ca-card" aria-labelledby="split-end-card">
<h3 class="ca-card__title" id="split-end-card">Next lesson</h3>
<p class="ca-card__description">Friday 16:00 — city centre practice with Noor, pick-up at the library.</p>
<div class="ca-card__footer">
<button class="ca-button ca-button--secondary ca-button--sm" type="button">Reschedule</button>
</div>
</article>
</div>
</section>Media Start layout
ca-split--media-start: Media first, content at the end; one column when narrow.
Media at the start
The card sits beside the story; on narrow screens it moves above it.
For busy students
Lessons that fit around your day
Book in the app, get picked up where you are and track every skill until the test.
- Evening and weekend slots
- Same instructor every lesson
Next lesson
Friday 16:00 — city centre practice with Noor, pick-up at the library.
<section class="ca-split ca-split--media-start w-full" aria-labelledby="split-start-title">
<div class="ca-split__content">
<p class="ca-split__eyebrow">For busy students</p>
<h2 class="ca-split__title" id="split-start-title">Lessons that fit around your day</h2>
<p class="ca-split__lead">Book in the app, get picked up where you are and track every skill until the test.</p>
<ul class="ca-check-list">
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" 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></span>
<span class="ca-check-list__text">Evening and weekend slots</span>
</li>
<li class="ca-check-list__item">
<span class="ca-check-list__icon" aria-hidden="true"><svg width="20" height="20" 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></span>
<span class="ca-check-list__text">Same instructor every lesson</span>
</li>
</ul>
</div>
<div class="ca-split__media">
<article class="ca-card" aria-labelledby="split-start-card">
<h3 class="ca-card__title" id="split-start-card">Next lesson</h3>
<p class="ca-card__description">Friday 16:00 — city centre practice with Noor, pick-up at the library.</p>
<div class="ca-card__footer">
<button class="ca-button ca-button--secondary ca-button--sm" type="button">Reschedule</button>
</div>
</article>
</div>
</section>Guidance and accessibility
When to use
- Use a split when a visual carries half the message: a screenshot, a card or a photo beside a short story.
- Keep the lead to a sentence or two; details belong in a list or the next section.
Accessibility
- Give the section an
aria-labelledbypointing at the title, so landmarks announce what the section is about. - Informative images get
alttext; purely decorative media get an emptyalt.
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-split | Block | Section with content and media side by side. Add one layout. |
ca-split__content | Part | Column with the eyebrow, title, lead and optional actions. |
ca-split__eyebrow | Part | Small label above the title. |
ca-split__title | Part | Heading of the block. |
ca-split__lead | Part | One or two sentences below the title. |
ca-split__media | Part | The visual side — a card, image or other media. |
ca-split--media-end | Layout | Media at the end. |
ca-split--media-start | Layout | Media first. |
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.
For busy students
Lessons that fit around your day
Book in the app, get picked up where you are and track every skill until the test.
- Evening and weekend slots
- Same instructor every lesson
Next lesson
Friday 16:00 — city centre practice with Noor, pick-up at the library.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
For busy students
Lessons that fit around your day
Book in the app, get picked up where you are and track every skill until the test.
- Evening and weekend slots
- Same instructor every lesson
Next lesson
Friday 16:00 — city centre practice with Noor, pick-up at the library.
Bloque skin
Example skin pushed far from base: square, heavy, offset shadows, larger targets.
For busy students
Lessons that fit around your day
Book in the app, get picked up where you are and track every skill until the test.
- Evening and weekend slots
- Same instructor every lesson
Next lesson
Friday 16:00 — city centre practice with Noor, pick-up at the library.
Pliego skin
Example skin from the press sheet: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
For busy students
Lessons that fit around your day
Book in the app, get picked up where you are and track every skill until the test.
- Evening and weekend slots
- Same instructor every lesson
Next lesson
Friday 16:00 — city centre practice with Noor, pick-up at the library.
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>