Skip to main content
USWDS + Tailwind

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
  1. Start a process

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

  2. Proceed to the second step

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

  3. Complete the step-by-step process

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

process-list-demo.tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'


export default function ProcessListDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Start a process</ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Proceed to the second step</ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Complete the step-by-step process</ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}

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

  1. Start a process

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

process-list-headings-demo.tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'


export default function ProcessListHeadingsDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title><h3>Start a process</h3></ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}

No Text

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
process-list-no-text-demo.tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'


export default function ProcessListNoTextDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Start a process</ProcessList.Title>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Proceed to the second step</ProcessList.Title>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Complete the step-by-step process</ProcessList.Title>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}

Custom Sizing

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.

  2. Proceed to the second step

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

  3. Complete the step-by-step process

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

process-list-custom-sizing-demo.tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'


export default function ProcessListCustomSizingDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content className="-top-2">
          <ProcessList.Title className="text-3xl">Start a process</ProcessList.Title>
          <ProcessList.Description className="text-xl">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content className="-top-2">
          <ProcessList.Title className="text-3xl">Proceed to the second step</ProcessList.Title>
          <ProcessList.Description className="text-xl">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content className="-top-2">
          <ProcessList.Title className="text-3xl">Complete the step-by-step process</ProcessList.Title>
          <ProcessList.Description className="text-xl">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}

Component API

Put one Item per step inside Root. Add a Title and optional Description to each Item.

Root<ol>

Orders the process steps.

Item<li>

Use one Item for each step in order.

Content<div>

Groups the step text.

Title<div>

Styles the step title; use a heading inside when the step introduces a section.

Description<div>

Holds explanatory step text.