Style & Appearance

Description

Flexible list provides alternative ways to display list information, including bullets, arrows, check marks, Xs, arrows, and numbers. The default style makes list items larger than regular body text and animates the list items so they appear on screen row by row.

NEW Fall 2025: Add headings to Flexible Lists.

Items in the list can be turned into headings with a toggle switch. Headings do not have the selected bullet point style (arrow, number, etc.) and appear in a strong typeface without indent.

Using headings within Flexible Lists preserves the intended reading order, which is important for web accessibility compliance.

Available Styles

  • Arrow
  • Bullet
  • Checkmark
  • X
  • Numbered Steps - Inline
  • Numbered Steps - Vertical

    Bullet

    • at vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium

    • deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident

    • similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

    Arrow

    • at vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium

    • deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident

    • similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

    Check Mark

    • at vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium

    • deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident

    • similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

    X

    • at vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium

    • deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident

    • similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

    Numbered Steps - Inline

    1. The first step

    2. The next step

    3. The last step

    Numbered steps - vertical

    1. The first step

    2. The next step

    3. The last step

    A bulleted list in three columns

    • list with columns

    • list with columns

    • list with columns

    • list with columns

    • list with columns

    A bulleted list with supporting text

    • List items can also have smaller text

      This is the smaller text that can add supporting information to the primary text of the list item.

    • List items can also have smaller text

      This is the smaller text that can add supporting information to the primary text of the list item.

    • List items can also have smaller text

      This is the smaller text that can add supporting information to the primary text of the list item.

    Flexible Lists with Headings

    One and two column examples. These examples use the check mark style, but you can use any style point.

    Heading followed by three bullet-pointed items, followed by another heading, and two bullet-pointed items.
    A heading with three items beneath it and a second column with a heading and two items beneath it.

    Admin UI

    Default Traits & Behaviors

    • Simply add list items, which can include links, but text formatting is determined by the list style.

    • Select the list type, number of columns, and borders to customize the look.

      Interface view

      screenshot of the Flexible List block in Admin UI

      Updated UI (Fall 2025)

      Turn items into headings with a light switch.

      Flexible List UI shows ability to toggle on/off headings.

      Recommendations

      • Achieve a variety of looks with different combinations
      • Using headings within Flexible Lists preserves the intended reading order, which is important for web accessibility compliance. (Compared to using a combination of text blocks and flexible list blocks within a container of two or three items across.)