Skip to content

Search

Start typing to search.

Show all pages

Documentation

Block

Steps

A numbered process, such as how to get started, in three to five steps.

2 layoutsOne structure; add one layout modifier to pick the arrangement.

Row layout

ca-steps--row: Steps side by side in as many columns as fit. For short steps on a wide page.

From lesson to licence

An ordered list; the numbers come from a CSS counter.

From first lesson to licence

  1. Book a trial lesson

    Pick a time that suits you; we pick you up at home.

  2. Pass the theory exam

    Practise online between lessons, at your own pace.

  3. Take your driving test

    Your instructor books it once you are ready.

HTML

Column layout

ca-steps--column: One step per row, the number beside the text. For longer steps or a narrow column.

From lesson to licence, in a column

The same markup; only the layout class differs.

From first lesson to licence

  1. Book a trial lesson

    Pick a time that suits you; we pick you up at home.

  2. Pass the theory exam

    Practise online between lessons, at your own pace.

  3. Take your driving test

    Your instructor books it once you are ready.

HTML

Guidance and accessibility

When to use

  • Use steps when order matters, such as getting started or how a service works.
  • Keep it to three to five steps, each starting with a verb.

Accessibility

  • The steps are an ordered list, so screen readers announce “1 of 3”. The visible number is drawn by CSS and hidden with aria-hidden="true", so it is not read twice.

Classes

Generated from the block contract. Layouts are part of the core, so every skin gets all of them.

Classes of the steps block
ClassKindUse it for
ca-stepsBlockSection with the header and the list of steps. Add one layout.
ca-steps__headerPartOptional title and lead above the steps.
ca-steps__titlePartHeading of the block.
ca-steps__leadPartOne or two sentences below the title.
ca-steps__listPartThe <ol> of steps; it numbers them.
ca-steps__itemPartOne step.
ca-steps__numberPartShows the step number; leave it empty.
ca-steps__item-titlePartWhat happens in the step, as a heading.
ca-steps__item-textPartOne line of detail.
ca-steps--rowLayoutSteps side by side.
ca-steps--columnLayoutOne step per row, number beside.

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.

From first lesson to licence

  1. Book a trial lesson

    Pick a time that suits you; we pick you up at home.

  2. Pass the theory exam

    Practise online between lessons, at your own pace.

  3. Take your driving test

    Your instructor books it once you are ready.

Calaca skin

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

From first lesson to licence

  1. Book a trial lesson

    Pick a time that suits you; we pick you up at home.

  2. Pass the theory exam

    Practise online between lessons, at your own pace.

  3. Take your driving test

    Your instructor books it once you are ready.

Proof skin

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

From first lesson to licence

  1. Book a trial lesson

    Pick a time that suits you; we pick you up at home.

  2. Pass the theory exam

    Practise online between lessons, at your own pace.

  3. Take your driving test

    Your instructor books it once you are ready.

Crossview skin

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

From first lesson to licence

  1. Book a trial lesson

    Pick a time that suits you; we pick you up at home.

  2. Pass the theory exam

    Practise online between lessons, at your own pace.

  3. Take your driving test

    Your instructor books it once you are ready.

Framework notes

Link the prebuilt stylesheet of your skin next to your brand theme. No build step.

HTML
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />