Content blocks

Steps

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

Block: .hs-steps
CSS: components/steps.css (in /brand.css)
JS: None
Status: Decided
Decided in: Components round 2a
Markdown: /components/steps.md

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 grid, or a plain list in Prose.
Routes to other pages: use Link list or link cards.
Questions and answers: use 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.

Preview on white

Choose your scholarship

Read the program page. Check the award’s focus, eligibility, deadline, and application instructions before you begin.
Prepare your materials

Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.
Sign in when prompted

Open the application from the program page. If the form asks you to sign in or register, do that first.
Review and submit

Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.

<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.

Preview on white

Select “Activate your membership” and choose a membership tier.
Complete your payment.
Open this page again. Your certificate downloads as a PDF that you can print.

<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>