data

Timeline

Events in order, each with a time and a title, such as the steps of a driving course.

CSS onlyPlain classes; no JavaScript in any stack.

Usage

An ordered list of items. Mark the current step with aria-current="step".

2 September
First lesson

Getting to know the car and the controls.
14 October
Theory exam passed
25 November
Interim test

A practice exam with a real examiner.
Driving test

Booked once your instructor marks you ready.

<ol class="ca-timeline w-full max-w-md">
  <li class="ca-timeline__item">
    <time class="ca-timeline__time" datetime="2026-09-02">2 September</time>
    <p class="ca-timeline__title">First lesson</p>
    <p class="ca-timeline__description">Getting to know the car and the controls.</p>
  </li>
  <li class="ca-timeline__item">
    <time class="ca-timeline__time" datetime="2026-10-14">14 October</time>
    <p class="ca-timeline__title">Theory exam passed</p>
  </li>
  <li class="ca-timeline__item" aria-current="step">
    <time class="ca-timeline__time" datetime="2026-11-25">25 November</time>
    <p class="ca-timeline__title">Interim test</p>
    <p class="ca-timeline__description">A practice exam with a real examiner.</p>
  </li>
  <li class="ca-timeline__item">
    <p class="ca-timeline__title">Driving test</p>
    <p class="ca-timeline__description">Booked once your instructor marks you ready.</p>
  </li>
</ol>

Examples

Guidance and accessibility

When to use

Use a timeline for a history or a sequence of steps where order and time matter.
Keep entries short; link to the details instead of putting them all in.
For a process people move through themselves, such as a checkout, a stepper fits better.

Accessibility

It is an ordered list, so screen readers announce the number of events and each position.
Put dates in <time datetime> so the machine-readable date is available.
The current step has aria-current="step"; the skin shows it with a filled and outlined marker, not by color alone.

Classes

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

Classes of the timeline component
Class	Kind	Use it for
`ca-timeline`	Component	The `<ol>` of events.
`ca-timeline__item`	Part	One event, with its marker on the line.
`ca-timeline__time`	Part	The date or time, in a `<time>` element.
`ca-timeline__title`	Part	What happened.
`ca-timeline__description`	Part	Optional detail.

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.

2 September
First lesson

Getting to know the car and the controls.
14 October
Theory exam passed
25 November
Interim test

A practice exam with a real examiner.
Driving test

Booked once your instructor marks you ready.

Calaca skin

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

2 September
First lesson

Getting to know the car and the controls.
14 October
Theory exam passed
25 November
Interim test

A practice exam with a real examiner.
Driving test

Booked once your instructor marks you ready.

Proof skin

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

2 September
First lesson

Getting to know the car and the controls.
14 October
Theory exam passed
25 November
Interim test

A practice exam with a real examiner.
Driving test

Booked once your instructor marks you ready.

Crossview skin

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

2 September
First lesson

Getting to know the car and the controls.
14 October
Theory exam passed
25 November
Interim test

A practice exam with a real examiner.
Driving test

Booked once your instructor marks you ready.

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