Process List

processUSWDS-derived

A numbered vertical step list with headings and content per step, connected by a vertical line.

Variants

Default

Start a process
Decide on the type of process and gather the necessary information.
Proceed to the second step
Complete any required forms and submit your application.
Complete the process
Review your submission and wait for confirmation.

<ol class="flex-process-list">
  <li class="flex-process-list__item">
    <h4 class="flex-process-list__heading">Start a process</h4>
    <p>Decide on the type of process and gather the necessary information.</p>
  </li>
  <li class="flex-process-list__item">
    <h4 class="flex-process-list__heading">Proceed to the second step</h4>
    <p>Complete any required forms and submit your application.</p>
  </li>
  <li class="flex-process-list__item">
    <h4 class="flex-process-list__heading">Complete the process</h4>
    <p>Review your submission and wait for confirmation.</p>
  </li>
</ol>

Contract

Class mapping

USWDS	Flex	Notes
`usa-process-list`	`.flex-process-list`	Base process list (ordered list)
`usa-process-list__item`	`.flex-process-list__item`	Process list item
`usa-process-list__heading`	`.flex-process-list__heading`	Step heading

Verified properties

font-familyfont-sizecolor

Intentional differences

border-left-color: ours = var(--flex-blue-10) (#d9e8f6), USWDS = #d9e8f6

Same color expressed via design token rather than hex literal.

Behavior promises

✓ Numbers rendered via CSS counter-increment
✓ Vertical line connects numbered circles
✓ Accessibility audit passes

Source CSS

/* flex-process-list — USWDS Process List conformance
   Numbered vertical step list with connecting line */

.flex-process-list {
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
  margin-block: 0;
  list-style-type: none;
  counter-reset: flex-numbered-list;
  padding: 20px 0 0 calc(2.5rem / 2 - 0.5rem / 2);
  position: relative;

  > li {
    margin-block-end: 0;
    max-inline-size: unset;
  }

  > .flex-process-list__item {
    max-inline-size: 72ex;
  }
}

.flex-process-list__item {
  border-inline-start: 0.5rem solid var(--flex-blue-10);
  font-size: var(--flex-text-uswds);
  margin-block-end: 0;
  padding-block-end: 2rem;
  padding-inline-start: calc(calc(2.5rem / 2 - 0.25rem) * 2);

  &:last-child {
    border-inline-start: 0.5rem solid transparent;
  }

  /* Numbered circle */
  &::before {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 99rem;
    background-color: var(--flex-color-bg);
    border: 0.25rem solid var(--flex-color-text);
    box-shadow: 0 0 0 0.25rem var(--flex-color-bg);
    color: var(--flex-color-text);
    content: counter(flex-numbered-list, decimal);
    counter-increment: flex-numbered-list;
    display: flex;
    font-size: 1.46rem;
    font-weight: 700;
    block-size: 2.5rem;
    inset-inline-start: 0;
    line-height: 0.9;
    margin-block-start: -0.4rem;
    position: absolute;
    inline-size: 2.5rem;
  }

  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }

  ul {
    list-style-type: disc;

    li:last-child {
      margin-block-end: 0;
    }
  }
}

.flex-process-list__heading {
  font-size: 1.46rem;
  line-height: 1.1;
  color: var(--flex-color-text);
  font-weight: 700;
  margin: 0;

  & + * {
    margin-block-start: 0.25rem;
  }
}

Process List

Variants

Default

Start a process

Proceed to the second step