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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Start a process

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.
Proceed to the second step

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.
Complete the step-by-step process

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.

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.

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Start a process

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.

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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Start a process
Proceed to the second step
Complete the step-by-step process

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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Start a process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.
Proceed to the second step
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.
Complete the step-by-step process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.

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.