Mark · Patterns

Steps

A numbered sequence — do this, then this — with a rule drawn through the markers. The count is the order, so it is generated rather than typed.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

Three steps

Full page preview ↗

How it works

From first look to first shipment.

  1. Send the brief

    Sizes, quantities, the deadline, and where it is going.

  2. Approve the proof

    One round is included, and nothing goes on press until you say so.

  3. Collect or ship

    Pick it up from the shop, or have it sent the same week.

<section class="mk-section">
  <div class="mk-container">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">How it works</p>
      <h2 class="mb-2">From first look to first shipment.</h2>
    </div>
    <ol class="mk-row mk-row--3up mk-steps">
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">01</span>
        <p class="mk-steps__title">Send the brief</p>
        <p class="mk-steps__body">Sizes, quantities, the deadline, and where it is going.</p>
      </li>
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">02</span>
        <p class="mk-steps__title">Approve the proof</p>
        <p class="mk-steps__body">One round is included, and nothing goes on press until you say so.</p>
      </li>
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">03</span>
        <p class="mk-steps__title">Collect or ship</p>
        <p class="mk-steps__body">Pick it up from the shop, or have it sent the same week.</p>
      </li>
    </ol>
  </div>
</section>
eyebrow: How it works
title: From first look to first shipment.
items: [3 items]

Four steps, muted

Full page preview ↗

Getting started

From nothing to a page.

  1. Install

    One stylesheet and one script.

  2. Compose

    Reach for a pattern and hand it your content.

  3. Publish

    Push the folder; there is no build to run.

  4. Edit

    Hand the same partials to an author in the CMS.

<section class="mk-section surface-muted">
  <div class="mk-container">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Getting started</p>
      <h2 class="mb-2">From nothing to a page.</h2>
    </div>
    <ol class="mk-row mk-row--4up mk-steps">
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">01</span>
        <p class="mk-steps__title">Install</p>
        <p class="mk-steps__body">One stylesheet and one script.</p>
      </li>
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">02</span>
        <p class="mk-steps__title">Compose</p>
        <p class="mk-steps__body">Reach for a pattern and hand it your content.</p>
      </li>
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">03</span>
        <p class="mk-steps__title">Publish</p>
        <p class="mk-steps__body">Push the folder; there is no build to run.</p>
      </li>
      <li class="mk-steps__step">
        <span class="mk-steps__marker" aria-hidden="true">04</span>
        <p class="mk-steps__title">Edit</p>
        <p class="mk-steps__body">Hand the same partials to an author in the CMS.</p>
      </li>
    </ol>
  </div>
</section>
eyebrow: Getting started
title: From nothing to a page.
surface: muted
items: [4 items]
Fields (11)
FieldTypeNotes
eyebrow text
title text
intro textarea
items repeater
padding text
surface text empty (page), muted, subtle, primary, or dark
container text
id text
shape_bottom group Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing.
shape_top group The same, on the band's TOP edge — it hangs upward over the band above.
class_names text
On this page