# Flux 2.0 — Walkthrough and storyboard

Numbered steps beside the interface they describe, and a strip of screens that tells a flow frame by frame.

Reference: https://flux.kaptio.com/components/walkthrough/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Explains how a task is done. The walkthrough pairs each step’s text with a frame holding the real components involved, and stacks the two when its container is narrow. The storyboard is the overview: one small screen per moment, numbered, with a caption, for a flow people should understand before they read the detail.

## Do not use it when
Not for a task people are doing right now; use the Stepper, which validates as it goes. Not for events in time; use the Timeline. Not for marketing feature lists; this is for explaining a sequence where order is the meaning.

## Markup

### Walkthrough

<ol class="flux-walkthrough">
  <li class="flux-walkthrough__step">
    <div class="flux-walkthrough__text">
      <h3 class="flux-walkthrough__title">Check what is still on request</h3>
      <p>Open the booking. Anything a supplier has not yet confirmed is marked On request, and the booking cannot be confirmed until it is resolved.</p>
    </div>
    <figure class="flux-walkthrough__media">
      <div class="flux-walkthrough__frame">
        <dl class="flux-dl">
          <div class="flux-dl__pair"><dt class="flux-dl__term">Hotel Borg, 2 rooms</dt><dd class="flux-dl__detail"><span class="flux-badge flux-badge--confirmed">Confirmed</span></dd></div>
          <div class="flux-dl__pair"><dt class="flux-dl__term">Glacier walk, 12 places</dt><dd class="flux-dl__detail"><span class="flux-badge flux-badge--pending">On request</span></dd></div>
        </dl>
      </div>
      <figcaption>The services list on the booking.</figcaption>
    </figure>
  </li>
  <li class="flux-walkthrough__step">
    <div class="flux-walkthrough__text">
      <h3 class="flux-walkthrough__title">Chase the supplier</h3>
      <p>The note tells you who to contact and by when. Record their answer on the service, and the badge changes to match.</p>
    </div>
    <figure class="flux-walkthrough__media">
      <div class="flux-walkthrough__frame">
        <div class="flux-note flux-note--warning">
          <div>
            <p class="flux-note__title">Reply due by 9 October</p>
            <p class="flux-note__body">Iceland Guides holds the places until then.</p>
          </div>
        </div>
      </div>
    </figure>
  </li>
  <li class="flux-walkthrough__step">
    <div class="flux-walkthrough__text">
      <h3 class="flux-walkthrough__title">Confirm the booking</h3>
      <p>When every service is confirmed, Confirm booking becomes available. The agent receives the confirmation straight away.</p>
    </div>
    <figure class="flux-walkthrough__media">
      <div class="flux-walkthrough__frame">
        <button class="flux-button" type="button">Confirm booking</button>
      </div>
    </figure>
  </li>
</ol>

### Storyboard

<ol class="flux-storyboard">
  <li class="flux-storyboard__frame">
    <div class="flux-storyboard__screen">
      <p class="flux-storyboard__screen-title">KB-104931</p>
      <p class="flux-storyboard__screen-meta">1 service on request</p>
    </div>
    <p class="flux-storyboard__caption">The agent opens the booking.</p>
  </li>
  <li class="flux-storyboard__frame">
    <div class="flux-storyboard__screen">
      <p class="flux-storyboard__screen-title">Glacier walk</p>
      <span class="flux-badge flux-badge--pending">On request</span>
    </div>
    <p class="flux-storyboard__caption">They find the service still waiting.</p>
  </li>
  <li class="flux-storyboard__frame">
    <div class="flux-storyboard__screen">
      <p class="flux-storyboard__screen-title">Glacier walk</p>
      <span class="flux-badge flux-badge--confirmed">Confirmed</span>
    </div>
    <p class="flux-storyboard__caption">The supplier’s answer is recorded.</p>
  </li>
  <li class="flux-storyboard__frame">
    <div class="flux-storyboard__screen">
      <p class="flux-storyboard__screen-title">Ready to confirm</p>
      <button class="flux-button flux-button--sm" type="button" tabindex="-1">Confirm booking</button>
    </div>
    <p class="flux-storyboard__caption">The booking is confirmed to the agent.</p>
  </li>
</ol>

## API
- flux-walkthrough (class): On the ol of steps. It is the container for the narrow layout.
- flux-walkthrough__step (class): An li holding the text and the media. Its number comes from the list order.
- flux-walkthrough__text | __title (class): The step heading and its paragraphs.
- flux-walkthrough__media | __frame (class): The figure and the layer-02 frame that holds components or an image.
- flux-storyboard (class): On the ol of frames. Frames fill the row at 16rem minimum.
- flux-storyboard__frame | __screen | __caption (class): A frame, its 4:3 screen and its numbered caption.
- flux-storyboard__screen-title | __screen-meta (class): Text inside a schematic screen.

## Accessibility
- Both are ordered lists, so the step count and position are announced.
- Each step has a real heading, so the walkthrough can be navigated by headings.
- A screenshot in a frame needs alt text saying what it shows, not what it is.

## Keyboard
- Tab: Reaches links in the text. Components in a frame are illustrations; give their controls tabindex="-1" or use a screenshot.

## Tokens
- --flux-walkthrough-gap | -marker-size | -marker-bg | -marker-text
- --flux-walkthrough-media-bg | -media-padding
- --flux-storyboard-frame-width | -gap | -number
- --flux-storyboard-screen-bg | -screen-border | -screen-padding

## Do
- Show the real components in the frame, so the walkthrough stays true when they change.
- Keep one idea per step.

## Do not
- Do not number content where order is not the meaning; this is for sequences.
- Do not let a storyboard replace the walkthrough for people doing the task; it is the overview.