import { Canvas, Meta } from '@storybook/addon-docs/blocks';

<Meta title="Designer Documentation/Process list" />

# Process lists

The process list, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process.


<Canvas>
  <ol class="process">
    <li class="process-step list-one">
      <b>Heading for step one.</b><br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </li>
    <li class="process-step list-two">
      <b>Heading for step two.</b><br/>
      Sed sed mi mattis orci posuere suscipit. Nunc eu sapien sit amet nibh finibus rutrum. Duis sit amet libero sapien. Nam cursus lobortis tincidunt.
    </li>
    <li class="process-step list-three">
      <b>Heading for step three.</b><br/>
      Fusce sit amet egestas elit, id suscipit dolor. Nam sed augue nibh. In euismod aliquam lacinia
   </li>
  </ol>
</Canvas>

## Usability

### Guidance

- Can be used to display up to 20 steps.
- List headings should start with a verb.
- Make headings clear and concise. You can always write more content in paragraphs and other HTML elements below the heading.
- Do not stack.

### When to use

- When users need to see a list of sequential steps.
- In a multi-step process where the user may need to track progress over an extended period.

### When to consider something else

- The list is a checklist.
- The information is not sequential.