Skip to main content

Process List

A process list displays the steps or stages of important instructions or processes.


Default Process List

Component Preview

  1. Start a process

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
    • Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
    • Aliquam erat volutpat. Sed quis velit.

  2. Proceed to the second step

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  3. Complete the step-by-step process

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.


Component Code

<ol class="usa-process-list">
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading">Start a process</h4>
    <p class="margin-top-05">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    <ul>
      <li>First bullet point</li>
      <li>Second bullet point</li>
      <li>Third bullet point</li>
    </ul>
  </li>
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading">Proceed to the second step</h4>
    <p>Content for step two.</p>
  </li>
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading">Complete the process</h4>
    <p>Content for step three.</p>
  </li>
</ol>

Simple Process List (No Text)

Component Preview

  1. Start a process.

  2. Proceed to the second step.

  3. Complete the step-by-step process.


Component Code

<ol class="usa-process-list">
  <li class="usa-process-list__item padding-bottom-4">
    <p class="usa-process-list__heading font-sans-xl line-height-sans-1">
      Start a process.
    </p>
  </li>
  <li class="usa-process-list__item padding-bottom-4">
    <p class="usa-process-list__heading font-sans-xl line-height-sans-1">
      Proceed to the second step.
    </p>
  </li>
  <li class="usa-process-list__item">
    <p class="usa-process-list__heading font-sans-xl line-height-sans-1">
      Complete the step-by-step process.
    </p>
  </li>
</ol>

Custom Sizing

Component Preview

  1. Start a process.

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.

  2. Proceed to the second step.

    Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

  3. Complete the step-by-step process.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.


Component Code

<ol class="usa-process-list">
  <li class="usa-process-list__item padding-bottom-4">
    <h4 class="usa-process-list__heading font-sans-xl line-height-sans-1">
      Start a process.
    </h4>
    <p class="font-sans-lg margin-top-1 text-light">
      Nullam sit amet enim. Suspendisse id velit vitae ligula.
    </p>
  </li>
  <li class="usa-process-list__item padding-bottom-4">
    <h4 class="usa-process-list__heading font-sans-xl line-height-sans-1">
      Proceed to the second step.
    </h4>
    <p class="font-sans-lg margin-top-1 text-light">
      Suspendisse id velit vitae ligula volutpat condimentum.
    </p>
  </li>
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading font-sans-xl line-height-sans-1">
      Complete the step-by-step process.
    </h4>
    <p class="font-sans-lg margin-top-1 text-light">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
  </li>
</ol>


Guidance

When to use the process list component

Displaying high-level sequential steps
Use process lists to create a clear hierarchy and help users easily differentiate between individual steps or stages in a process.

When to consider something else

Multi-page forms or wizards
Use the step indicator component to help users work through a form or process that spans several different pages.
When showing current status or progress
Use the step indicator component to show the user the current step in a multi-step process.
The steps are non-sequential
Use unordered lists, graphic lists, or icon lists to display text that doesn't have a clear, logical order to it.
In-page navigation
Use the side navigation component to display the "sub-navigation" within a section or page of the website.

Usability guidance

Be thoughtful about the number of steps
A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing.
Use consistent headings
Headings should be written with a parallel structure (e.g., all start with an action verb), including consistent end punctuation, and should be short enough to fit on one line, if possible.
Add other types of content as needed
The body of each list item can be used to display additional rich text content including HTML, images, and other components like buttons, images, simple lists, links, and tables.

Accessibility guidance

Use semantic heading levels
Though the default code uses an <h4>, use the correct heading level with the class name usa-process-list__heading in your own implementation.


Settings

Variable Description
$theme-process-list-counter-background-color

Background color of the counter circle.
$theme-process-list-counter-border-color

Color of the border around the counter circle.
$theme-process-list-counter-border-width

Size of the border around the counter circle.
$theme-process-list-counter-font-family

Font family of the counter text.
$theme-process-list-counter-font-size

Font size of the counter text.
$theme-process-list-counter-gap-color

Color of gap between counter and connector.
$theme-process-list-counter-gap-width

Size of gap between counter and connector.
$theme-process-list-counter-size

Size of the counter circle.
$theme-process-list-counter-text-color

Color of the number text inside the counter circle.
$theme-process-list-connector-color

Color of the connector line between counter circles.
$theme-process-list-connector-width

Width of the connector line between counter circles.


Variants

This component has no named variants. Customize using utility classes.

Looking for U.S. government information and services?
Visit USA.gov