Process list

The ::process-list directive renders a USWDS process list — an ordered list of numbered steps with connector lines between them. Each step is a :::process-list-item with a #heading slot for the step title and a body for the description.

Basic usage

1. Gather supporting records

   Collect any documents you already have that identify the records you're requesting — case numbers, dates, or agency names narrow the search.

2. Submit your request

   File through the online FOIA portal or mail a written request to the agency's FOIA office.

3. Track the response

   Agencies have 20 business days to acknowledge and respond. You'll receive a tracking number and status updates at the email you provided.

::process-list
  :::process-list-item
    #heading
    ### Gather supporting records

    #body
    Collect any documents you already have...
  :::
  :::process-list-item
    #heading
    ### Submit your request

    #body
    File through the online FOIA portal...
  :::
::

How the numbering works

USWDS handles the numbered circles and connector lines entirely via CSS — :nth-child selectors on .usa-process-list__item and a pseudo-element for the circle. The component is just a styled <ol> with <li> children.

This means:

• Numbers are automatic. You can't start at a custom number.
• Reordering is just reordering markdown. Drag items around in the source; the numbers update.
• The last item has no trailing connector line. CSS handles it via :last-child.

Rich content inside steps

The body accepts any markdown — lists, tables, code blocks, directive components:

1. Prepare your environment

   You'll need:

   • Node.js 20+
   • A package manager (pnpm, npm, or yarn)
   • An Astro 6 project

   If you're starting from scratch:

   pnpm create @red-glare my-docs

2. Configure the integration

   The minimum configuration is just a title. Everything else has sensible defaults.

   Add to astro.config.mjs:

   import redGlare from '@red-glare/astro'
   
   export default defineConfig({
     integrations: [redGlare({ title: 'My Docs' })],
   })

Props reference

::process-list

No props. The <ol class="usa-process-list"> wrapper is rendered unconditionally.

::process-list-item

Source

Components: packages/astro/src/components/ProcessList.tsx, ProcessListItem.tsx