---
title: Process list (Vanilla) - USWDS + Tailwind
description: Show the steps of a task with a process list. See examples with
  headings, steps without body text, and custom sizing.
---

# Process list

Show the steps of a task with a process list. See examples with headings, steps without body text, and custom sizing.

## Examples

### Default

```html
<ol class="pt-1.5 pl-4 [counter-reset:usa-process-list]">
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-0.5">
    <div class="text-xl font-bold">Start a process</div>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div>
  </div>
</li>
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-0.5">
    <div class="text-xl font-bold">Proceed to the second step</div>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div>
  </div>
</li>
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-0.5">
    <div class="text-xl font-bold">Complete the step-by-step process</div>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div>
  </div>
</li>
</ol>
```

### With headings

Place a heading inside each title when the step represents a section of the page. Choose the heading level to fit the page structure.

```html
<ol class="pt-1.5 pl-4 [counter-reset:usa-process-list]">
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-0.5">
    <div class="text-xl font-bold"><h3>Start a process</h3></div>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div>
  </div>
</li>
</ol>
```

### No Text

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

### Custom Sizing

```html
<ol class="pt-1.5 pl-4 [counter-reset:usa-process-list]">
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-2"><div class="text-3xl font-bold">Start a process</div><div class="text-xl"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div></div>
</li>
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-2"><div class="text-3xl font-bold">Proceed to the second step</div><div class="text-xl"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div></div>
</li>
<li class="relative pl-8 pb-8 border-l-8 border-l-blue-10 before:absolute before:-left-6 before:-top-1.5 before:flex before:size-10 before:items-center before:justify-center before:rounded-full before:border-4 before:border-gray-90 before:color-gray-90 before:bg-white before:outline-4 before:outline-offset-0 before:outline-white before:text-xl before:font-bold before:[counter-increment:usa-process-list] before:content-[counter(usa-process-list)] last:border-l-transparent last:pb-0">
  <div class="relative -top-2"><div class="text-3xl font-bold">Complete the step-by-step process</div><div class="text-xl"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p></div></div>
</li>
</ol>
```

## Component API

Use an ordered list for the process and a list item for each step. This lets assistive technology announce the number and order of steps. Place a heading inside a title when the step represents a page section, using the heading level that fits the page hierarchy.