Skip to main content
Logo USWDS + Tailwind

Process list

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

  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.

Twig 
<ol class="pt-5 pl-4 [counter-reset:usa-numbered-list]">
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose">
      <h4 class="text-xl font-bold">Start a process</h4>
      <p class="mt-1 mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.</p>
      <ul class="space-y-1 list-disc pl-10">
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li>
        <li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li>
        <li>Aliquam erat volutpat. Sed quis velit.</li>
      </ul>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose">
      <h4 class="text-xl font-bold">Proceed to the second step</h4>
      <p>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.</p>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose">
      <h4 class="text-xl font-bold">Complete the step-by-step process</h4>
      <p>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.</p>
    </div>
  </li>
</ol>

No Text & Custom Sizing

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

  1. Start a process

  2. Proceed to the second step.

  3. Complete the step-by-step process

Twig 
<ol class="pt-5 pl-4 [counter-reset:usa-numbered-list]">
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Start a process</h4>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Proceed to the second step.</h4>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Complete the step-by-step process</h4>
    </div>
  </li>
</ol>

Custom Sizing

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

  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.

Twig 
<ol class="pt-5 pl-4 [counter-reset:usa-numbered-list]">
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Start a process</h4>
      <p class="text-xl font-light mt-2">Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</p>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Proceed to the second step.</h4>
      <p class="text-xl font-light mt-2">Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
    </div>
  </li>
  <li class="relative pl-8 pb-8  before:flex before:items-center before:justify-center before:border-4 before:border-gray-90 before:color-gray-90 before:size-10 before:rounded-full before:-left-6 before:-top-1.5 before:absolute before:bg-white before:outline-4 before:outline before:outline-offset-0 before:outline-white border-l-8 border-l-blue-10 before:[counter-increment:usa-numbered-list] before:content-[counter(usa-numbered-list)] before:font-bold before:text-2xl last:border-l-transparent">
    <div class="max-w-prose -top-1 relative">
      <h4 class="text-3xl font-bold">Complete the step-by-step process</h4>
      <p class="text-xl font-light mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.</p>
    </div>
  </li>
</ol>

Component API

List

  • <ol>

    Use an <ol> for Process Lists. This allows assistive technology to enumerate the items in the Process List and allows shortcuts between list items.

List Item

  • <li>

    Use an <li> for Process List Items. This allows assistive technology to enumerate the items in the Process List and allows shortcuts between list items.

Heading

Use the appropriate heading level for your Process List Heading. Update the heading level based on the content of your page to make sure card headings are in the correct, logical outline order.

Content

All Process List Content is wrapped in a .prose class to ensure proper rendering.