Skip to main content Skip to navigation Skip to search

Lists are for showing a set of items in sequence, and can be nested to show some hierarchy.

Usage

Use a list to group related items and organize them vertically for easy scanning.

Types

Clarity has three types of lists: unordered, ordered, and unstyled.

Code Examples

Unordered Lists

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Ullamco laboris nisi ut aliquip
    • Consequat
    • Adipisicing
    • Exercitation
  • Reprehenderit in voluptate
  • Mollit anim id

Ordered Lists

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. Ullamco laboris nisi ut aliquip
    • Consequat
    • Adipisicing
    • Exercitation
  3. Reprehenderit in voluptate
  4. Mollit anim id
    1. Consequat
    2. Adipisicing
    3. Exercitation
  5. Reprehenderit in voluptate

Unstyled Lists

  • Id est laborum
  • Dolore eu fugiat
  • Occaecat cupidatat
  • Deserunt mollit anim

Compact Lists

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Ullamco laboris nisi ut aliquip
    • Consequat
    • Adipisicing
    • Exercitation
  • Reprehenderit in voluptate
  • Mollit anim id