layout

Cluster

Puts children in a row that wraps, such as buttons or tags.

CSS onlyPlain classes; no JavaScript in any stack.

Usage

A cluster keeps items on one line and wraps them when there is no room.

<div class="ca-cluster ca-cluster--md">
  <button class="ca-button ca-button--primary ca-button--md" type="button">Save lesson</button>
  <button class="ca-button ca-button--outline ca-button--md" type="button">Preview</button>
  <button class="ca-button ca-button--ghost ca-button--md" type="button">Cancel</button>
</div>

Examples

As a list

Make the cluster a list when its items are a set, such as tags.

Roundabouts
Merging
Parallel parking
Night driving
Highway exits

<ul class="ca-cluster ca-cluster--sm m-0 list-none p-0" aria-label="Skills practised">
  <li><span class="ca-badge ca-badge--neutral">Roundabouts</span></li>
  <li><span class="ca-badge ca-badge--neutral">Merging</span></li>
  <li><span class="ca-badge ca-badge--neutral">Parallel parking</span></li>
  <li><span class="ca-badge ca-badge--neutral">Night driving</span></li>
  <li><span class="ca-badge ca-badge--neutral">Highway exits</span></li>
</ul>

Guidance and accessibility

When to use

Use a cluster for buttons, tags or links that sit side by side and may wrap on narrow screens.
Put the main action first in the markup; wrapping keeps that order.

Accessibility

Use a <ul> when the items form a set and label it, so screen readers announce the number of items.

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the cluster component
Class	Kind	Use it for
`ca-cluster`	Component	A row that wraps; the space between items comes from the size.
`ca-cluster--sm`	Size	Tight space, for tags.
`ca-cluster--md`	Size	Default space, for buttons.
`ca-cluster--lg`	Size	Wide space.

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.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

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>

Search

Documentation