Skip to main content
An Official Vermont Government Website

Process List

  1. 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.

  2. 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.

  3. 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.

Description

Use process lists to create a clear hierarchy and help users easily differentiate between individual steps or stages in a process.

Guidance on Usage

The following recommendations are provided by the USWDS on usage of the process list:

When to consider something else

  • Multi-page forms or wizards. Use the step indicator component to help users work through a form or process that spans several different pages.
  • When showing current status or progress. Use the step indicator component to show the user the current step in a multi-step process.
  • In-page navigation. Use the side navigation component to display the “sub-navigation” within a section or page of the website.
  • The steps are non-sequential. Use unordered lists, graphic lists (coming soon), or icon lists (coming soon) to display text that doesn’t have a clear, logical order to it.
  • The listed content is meant to improve readability of a complex sentence. Use the ordered and unordered list components to break up sentences and paragraphs with lists. These lists are part of the general content of the page and don’t need the typographical hierarchy or visual impact of the process list.

Usability guidance

  • Be thoughtful about the number of steps. A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing.
  • Use consistent headings. Headings should be written with a parallel structure (e.g., all start with an action verb, etc.), including consistent end punctuation, and should be short enough to fit on one line, if possible.
  • Add other types of content as needed. The body of each list item can be used to display additional rich text content including HTML, images, and other components like buttons, images, simple lists, links, and tables.

Creating and Editing Process Lists

  1. Navigate to Structure -> Block Layout -> Custom Block Library.

     

  2. Select the “Add Custom Block”
  3. Select “Process Step”-

     

  4. Add content.
    1. Header: Header of the process step that appears next to the step number.
    2. Body: Content of the process step.
  5. Repeat until all steps are created.
  6. Navigate to Structure -> Block Layout.-

     

  7. Select the “Place block” button in the region you would like your widget.

     

  8. Select “Add custom block”.

     

  9. Select “Process list”.
  10. Fill out the following fields:
    1. Block Description: Title used to find it in the administration panel
    2. Processes: Search and select the above Process Steps. The “Header” field is what you are searching for.
  11. Organize Processes in the order you need
  12. Save
  13. Hide title and set the page restriction to the page you would like it to display.