List

List Building Blocks are used to highlight discrete pieces of information in a visually clear way. They help readers focus on important information by:

  • Highlighting hierarchies or levels of importance.
  • Indicating chronological steps or order.
  • Creating white space for readability.
  • Organizing material in a way that is easy to skim or scan.

Considerations

  • Do: Use to break up longer chunks of text-based content.
  • Don't: Use more than three levels.

Bulleted List

A bulleted list, or unordered lists is useful for creating lists that stand out from other text without implying a sequence or specific order. Use a bulleted list to help readers identify key points.

    Explore

    Preview

    Image
    Bulleted List with three levels

    Code

    <ul>
        <li>#ToDo: Add item - Level 1
            <ul>
                <li>#ToDo: Add item - Level 2
                    <ul>
                        <li>#ToDo: Add item - Level 3</li>
                     </ul>
                </li>
            </ul>
       </li>
       <li>#ToDo: Add item - Level 1</li>
       <li>#ToDo: Add item - Level 1</li>
    </ul>
    

    Numbered List

    Numbered lists are useful for creating lists that contain a sequence or for communicating chronological information. Use numbered lists to relate a process, procedure, or order. 

      Explore

      Preview

      Image
      Numbered List with three levels

      Code

      <ol>
          <li>#ToDo: Add item - Level 1
          <ol>
              <li>#ToDo: Add item - Level 2
                   <ol>
                       <li>#ToDo: Add item - Level 3</li>
                   </ol>
              </li>
           </ol>
           </li>
           <li>#ToDo: Add item - Level 1</li>
           <li>#ToDo: Add item - Level 1</li>
      </ol>