Interface design: Styled list

Different styles of list can be used to suit the content. WorkSafe has bullets, numbers, ticks, crosses and checkboxes.

Styled list variations

Styled lists can be used with an H2, H3 or no heading if they follow a leading sentence. There are several style variations for different purposes.

This is an H2 heading

  • This is an unordered list.
    • It has yellow bullet points.
      • This is a nested item.

    This is an H3 heading

    • This is a list using ticks.
      • Ticks demonstrate positive actions and say 'do this'.
        • This is a nested item.

      This list has a leading sentence instead of a heading:

      • This is a list using crosses.
        • Crosses demonstrate negative actions and say 'don't do this'.
          • This is a nested item.

        Numbered lists are used to show order or sequence:

        1. This is an ordered list.
          1. This is the second step in the sequence.
            1. This is a nested item.
            2. An additional nested item.

          Definition lists are used for glossary definitions:

          Term one
          The definition of term one.
          Term two
          The definition of term two

          Checklists are a novelty. They don't save the user's selection:

          Zeplin examples