Process List
A process list displays the steps or stages of important instructions or processes.
View USWDS component for guidance
Default
-
Start a process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
- Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
- Aliquam erat volutpat. Sed quis velit.
-
Proceed to the second step
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Complete the step-by-step process
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
<ol class="usa-process-list">
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Start a process</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque.
</p>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis.
</li>
<li>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum.
</li>
<li>Aliquam erat volutpat. Sed quis velit.</li>
</ul>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Proceed to the second step</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien.
</p>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
<p>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
</li>
</ol>
Connected
-
Start a process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
- Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
- Aliquam erat volutpat. Sed quis velit.
-
Proceed to the second step
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Complete the step-by-step process
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
<ol class="usa-process-list usa-process-list--connected">
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Start a process</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque.
</p>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis.
</li>
<li>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum.
</li>
<li>Aliquam erat volutpat. Sed quis velit.</li>
</ul>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Proceed to the second step</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien.
</p>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
<p>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
</li>
</ol>
Big
-
Start a process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
- Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
- Aliquam erat volutpat. Sed quis velit.
-
Proceed to the second step
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Complete the step-by-step process
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
<ol class="usa-process-list usa-process-list--big">
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Start a process</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque.
</p>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis.
</li>
<li>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum.
</li>
<li>Aliquam erat volutpat. Sed quis velit.</li>
</ul>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Proceed to the second step</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien.
</p>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
<p>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
</li>
</ol>
Big, Connected
-
Start a process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
- Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
- Aliquam erat volutpat. Sed quis velit.
-
Proceed to the second step
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Complete the step-by-step process
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
<ol class="usa-process-list usa-process-list--big usa-process-list--connected">
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Start a process</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque.
</p>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis.
</li>
<li>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum.
</li>
<li>Aliquam erat volutpat. Sed quis velit.</li>
</ul>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Proceed to the second step</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien.
</p>
</li>
<li class="usa-process-list__item">
<h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
<p>
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
</li>
</ol>