Directions Step List - Everyday Interface Patterns

A deterministic ordered route card shows three pinned steps with distance and time, with no route engine.

Program

Directions can be displayed as a simple ordered list when the steps are already known. This lesson does not calculate a route.

directions_step_list.html

Visuals: captured from real browser rendering

<section class="directions-card" aria-labelledby="directions-title">
  <h2 id="directions-title">Directions to Library Desk</h2>
  <ol>
    <li><strong>Start at Web Hall</strong><span>0.1 mi, 2 min</span></li>
    <li><strong>Turn left on Demo Street</strong><span>0.3 mi, 5 min</span></li>
    <li><strong>Enter at the south door</strong><span>0.1 mi, 1 min</span></li>
  </ol>
  <p class="note">Pinned directions only; no route engine runs.</p>
</section>
<style>
  .directions-card { display: grid; gap: 10px; max-width: 34rem; border: 1px solid #94a3b8; padding: 12px; }
  .directions-card ol { display: grid; gap: 8px; margin: 0; padding-left: 1.5rem; }
  .directions-card li { padding: 8px; border: 1px solid #cbd5e1; }
  .directions-card span { display: block; color: #475569; }
  .note { margin: 0; color: #475569; }
</style>

Label the directions card.
The section is labelled by the route heading.
Use an ordered list for steps.
The ordered list shows that the directions have a sequence.
Show the first pinned step.
The first route step has fixed text, distance, and time.
Show the second pinned step.
The second route step is fixed and numbered by the ordered list.
Show the final pinned step.
The final route step completes the static directions.
Check the directions list.
The card shows three pinned steps and says no route engine runs.

ordered route An ordered list communicates step sequence.

pinned distance and time Each distance and time is fixed lesson data.

no route engine The lesson should not imply route calculation.