Workflow

Example

A Frame holds the walkthrough video, and a short numbered list beside it names each step the visual demonstrates.

Composition

A workflow section pairs a single visual with the steps it walks through:

• Frame, the browser chrome that holds the walkthrough video or screenshot.
• Numbered steps, a short ordered list where each step carries a badge number, a title, and one line of detail.

Usage

The workflow section shows the product in motion, then names what's happening so readers can follow along.

• Pair a real video or screenshot in a Frame with the steps, never use a placeholder in production.
• Use 3-5 steps; fewer feels thin, more turns the walkthrough into a manual.
• Number the steps so the order is unmistakable.
• Keep each step to a title plus one line, the detail lives in the visual.
• The visual demonstrates the steps, not the other way around, lead with the Frame.

Code

Link frame.css, then place a .frame beside a numbered <ol>, each step pairs a badge with a title and one line.

<link rel="stylesheet" href="/_shared/components/frame.css">

<div class="frame">
  <div class="frame__bar">
    <span class="frame__dot"></span>
    <span class="frame__dot"></span>
    <span class="frame__dot"></span>
    <span class="frame__url">app.convert.com/new-test</span>
  </div>
  <div class="frame__body"><!-- walkthrough video --></div>
</div>

<ol>
  <li>
    <span>1</span>
    <h3>Pick a goal</h3>
    <p>Choose the metric your test should move.</p>
  </li>
</ol>