Stepper

cmp-stepper turns a plain <ol> into a connected, numbered step list. There is no badge or panel markup to write — the number comes from a CSS counter, and the card styling lives on the <li> itself, so authoring it is just an ordinary list with one class added.

Basic usage

Weekly homework

1. Read the assigned chapter before class.
2. Watch the recorded lecture.
3. Post one discussion question in the forum.

<h3>Weekly homework</h3>
<ol class="cmp-stepper" role="list">
  <li>Read the assigned chapter before class.</li>
  <li>Watch the recorded lecture.</li>
  <li>Post one discussion question in the forum.</li>
</ol>

Color modifiers

Add a color modifier to change the badge and connector color. These reuse the same brand names already used by util-background-*. Badge text switches automatically between white and black to keep readable contrast against whichever color is chosen, so any color in the palette works, including lighter ones like creamery.

Olympic variant

1. First step.
2. Second step.

Creamery variant

1. First step.
2. Second step.

<h3>Olympic variant</h3>
<ol class="cmp-stepper cmp-stepper--olympic" role="list">
  <li>First step.</li>
  <li>Second step.</li>
</ol>
<h3>Creamery variant</h3>
<ol class="cmp-stepper cmp-stepper--creamery" role="list">
  <li>First step.</li>
  <li>Second step.</li>
</ol>

Size modifiers

Add cmp-stepper--sm or cmp-stepper--lg to shrink or enlarge the badge. The connector line and content padding rescale automatically. Modifiers can be combined; see Combining modifiers below.

Large size

1. First step.
2. Second step.

<h3>Large size</h3>
<ol class="cmp-stepper cmp-stepper--lg" role="list">
  <li>First step.</li>
  <li>Second step.</li>
</ol>

Shield shape

Add cmp-stepper--shield to swap the circular badge for the university’s arch-shield mark. It composes with color and size the same way — nothing else about the layout changes.

1. First step.
2. Second step.

<ol
  class="cmp-stepper cmp-stepper--shield"
  role="list"
  aria-label="Shield step list"
>
  <li>First step.</li>
  <li>Second step.</li>
</ol>

Horizontal orientation

Add cmp-stepper--horizontal to lay the steps out in a row instead of stacked, with the badge above each panel instead of beside it. Below the sm breakpoint (30rem / 480px) it falls back to the default vertical layout automatically, so it never forces cramped columns on a phone.

Weekly homework

1. Read the assigned chapter before class.
2. Watch the recorded lecture.
3. Post one discussion question in the forum.

<h3>Weekly homework</h3>
<ol class="cmp-stepper cmp-stepper--horizontal" role="list">
  <li>Read the assigned chapter before class.</li>
  <li>Watch the recorded lecture.</li>
  <li>Post one discussion question in the forum.</li>
</ol>

It composes with color, size, and shape the same way the vertical layout does:

Large, Olympic, shield, horizontal

1. First step.
2. Second step.

<h3>Large, Olympic, shield, horizontal</h3>
<ol
  class="cmp-stepper cmp-stepper--olympic cmp-stepper--lg cmp-stepper--shield cmp-stepper--horizontal"
  role="list"
>
  <li>First step.</li>
  <li>Second step.</li>
</ol>

Combining modifiers

Color, size, shape, and orientation modifiers are independent classes, so any combination is valid — apply as many as the step list needs.

Large, Athens, shield

1. First step.
2. Second step.

<h3>Large, Athens, shield</h3>
<ol
  class="cmp-stepper cmp-stepper--athens cmp-stepper--lg cmp-stepper--shield"
  role="list"
>
  <li>First step.</li>
  <li>Second step.</li>
</ol>

Structure

Element	Classes	Purpose
List	.cmp-stepper	Container — sets up the counter and connecting line
Step	Plain <li>	No class needed — the numbered badge and panel box are drawn by the component itself
Color modifier	.cmp-stepper--<color>, e.g. --olympic, --creamery	Recolors the badge and connector; badge text contrast is picked automatically
Size modifier	.cmp-stepper--sm, .cmp-stepper--lg	Shrinks or enlarges the badge; everything else rescales with it
Shape modifier	.cmp-stepper--shield	Swaps the circular badge for the arch-shield mark
Orientation modifier	.cmp-stepper--horizontal	Lays steps out in a row instead of stacked; falls back to vertical below the sm breakpoint

Accessibility

• The step numbering is conveyed natively by the semantic <ol>/<li> structure — the visible badge number is decorative repetition of that same information, not the only source of it.
• If a heading sits above the list, that gives assistive technology enough context on its own; no extra label is needed, as shown in most examples above. Only pass the label prop, which becomes the <ol>’s aria-label, when there is no heading nearby, as in the shield example above.
• Do not add badge or panel <div>s inside the <li> — that markup is not needed and will visually conflict with this component’s own generated badge and panel.