# Steps

> A numbered procedure where order matters, with CSS numerals in navy rings.

- Block class: `.hs-steps`
- CSS: `components/steps.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: Columns, List
- HTML page: https://brand.honorsociety.org/components/steps/

## What it is

A numbered procedure where order matters. CSS numerals in a 40px navy ring, Didot titles, a hairline rail between steps from 48rem.

## When to use

- A how-to-apply procedure on a scholarship page (three or four steps with titles).
- Short one-line steps, such as the certificate download steps (`--list`).
- Any task where the reader must do step 1 before step 2.

## When not to use

- Items where order does not matter: use a [Card](/components/card/) grid, or a plain list in [Prose](/components/prose/).
- Routes to other pages: use [Link list](/components/link-list/) or link cards.
- Questions and answers: use [FAQ](/components/faq/).

## Rules

- Markup: `<ol class="hs-steps">` with one `li.hs-steps__item` per step. Each step has an optional `h3.hs-steps__title`, then `p.hs-steps__text`.
- Do not type the numbers. A CSS counter draws them, with no leading zeros.
- Use the default for three steps and `--4` for four. Between 48rem and 62rem, `--4` shows two rows of two.
- Use `--list` for short one-line steps with no title. It stays vertical at every width.
- Write each title as a short heading ("Choose your scholarship"), not a label.
- The ring and numeral follow the ground: navy on light, white on navy.

## Accessibility

- `<ol>` gives assistive technology the order and the count.
- The ring and numeral are navy on light (12.4:1), and white on navy.
- Step titles are `h3` under the band's `h2`.
- The rail between steps is decoration and carries no meaning.
- Steps need no JavaScript and have no motion.

## Variants

### Columns

Default three columns; `--4` gives four from 62rem.

```html
<ol class="hs-steps hs-steps--4">
  <li class="hs-steps__item">
    <h3 class="hs-steps__title">Choose your scholarship</h3>
    <p class="hs-steps__text">Read the program page. Check the award&rsquo;s focus, eligibility, deadline, and application instructions before you begin.</p>
  </li>
  <li class="hs-steps__item">
    <h3 class="hs-steps__title">Prepare your materials</h3>
    <p class="hs-steps__text">Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.</p>
  </li>
  <li class="hs-steps__item">
    <h3 class="hs-steps__title">Sign in when prompted</h3>
    <p class="hs-steps__text">Open the application from the program page. If the form asks you to sign in or register, do that first.</p>
  </li>
  <li class="hs-steps__item">
    <h3 class="hs-steps__title">Review and submit</h3>
    <p class="hs-steps__text">Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.</p>
  </li>
</ol>
```

### List

`--list` keeps short one-line steps vertical.

```html
<ol class="hs-steps hs-steps--list">
  <li class="hs-steps__item"><p class="hs-steps__text">Select &ldquo;Activate your membership&rdquo; and choose a membership tier.</p></li>
  <li class="hs-steps__item"><p class="hs-steps__text">Complete your payment.</p></li>
  <li class="hs-steps__item"><p class="hs-steps__text">Open this page again. Your certificate downloads as a PDF that you can print.</p></li>
</ol>
```