Process List Snippet

A process list displays the steps or stages of important instructions or processes. 

The snippet allows you to choose from four list styles including number, upper alpha, lower alpha, and roman numeral. A medium and large size option is also available.

List Counter Styles:

Number

  1. Sample Item 1

    One Vivamus sagittis lacus vel augue laoreet.

  2. Sample Item 2

    Two Vivamus sagittis lacus vel augue laoreet.

  3. Sample Item 3

    Three Vivamus sagittis lacus vel augue laoreet.

  4. Sample Item 4

    Four Vivamus sagittis lacus vel augue laoreet.

Alpha (upper & lower case)

  1. Sample Item 1

    One Vivamus sagittis lacus vel augue laoreet.

  2. Sample Item 2

    Two Vivamus sagittis lacus vel augue laoreet.

  3. Sample Item 3

    Three Vivamus sagittis lacus vel augue laoreet.

  4. Sample Item 4

    Four Vivamus sagittis lacus vel augue laoreet.

Roman Numeral

  1. Sample Item 1

    One Vivamus sagittis lacus vel augue laoreet.

  2. Sample Item 2

    Two Vivamus sagittis lacus vel augue laoreet.

  3. Sample Item 3

    Three Vivamus sagittis lacus vel augue laoreet.

  4. Sample Item 4

    Four Vivamus sagittis lacus vel augue laoreet.

Large Icon Setting

  1. Sample Item 1

    One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 

  2. Sample Item 2

    Two Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Optional Headings

  1. One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

  2. Two Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

When to use the process list snippet

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

Usability Guidelines

  • 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  images, and other components like buttons, images, simple lists, and links.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like a column row created.
  3. From the toolbar, select the snippet icon Snippet icon , which resembles a puzzle piece.
  4. From the list of snippets, select the Process List snippet.
  5. Press the Insert button.
  6. Enter your item headings and content into each table cell.
  7. Choose your display style. The numbered list style is default.
  8. Add a list item by adding an addition row to the table.
  9. Save and preview.