Simple list

The simple list component offers more flexibility for lists to be multiple columns and include different markers such as bullets, numbers, checkmarks, checkboxes, pipes or none. Simple list only contains list content and does not have the ability for additional text elements such as headings or paragraphs of text.

When to use

  • For more complex lists that would benefit to be in multi-column layout with a more diverse set of markers available
  • For longer lists that may benefit from having a “Back to top” action

When not to use

  • For single column lists that need a header or paragraph included consider using the text component

Anatomy

  1. Multi-column: ability to have 1-4 column lists, by default there is no indentation but option to add
  2. Marker: choose from bullets, numbers, checkmarks, checkboxes (non-interactive), pipes (inline display only) or none
  3. List item: can be plain text or links or both with option to be displayed inline 

Demos & variations

Checkmarks

  • Bananas

  • Strawberries

  • Blueberries

  • Blackberries

  • Watermelon

  • Dragon Fruit

  • Raspberries

  • Mangoes

  • Apples

  • Pineapples

  • Oranges

  • Pears

  • Peaches

  • Cherries

  • Grapes

Checkboxes (non-interactive)

  • Bananas

  • Strawberries

  • Blueberries

  • Blackberries

  • Watermelon

  • Dragon Fruit

  • Raspberries

  • Mangoes

  • Apples

  • Pineapples

  • Oranges

  • Pears

  • Peaches

  • Cherries

  • Grapes

Bullets

  • Bananas

  • Strawberries

  • Blueberries

  • Blackberries

  • Watermelon

  • Dragon Fruit

  • Raspberries

  • Mangoes

  • Apples

  • Pineapples

  • Oranges

  • Pears

  • Peaches

  • Cherries

  • Grapes

Numbers

  1. Bananas

  2. Strawberries

  3. Blueberries

  4. Blackberries

  5. Watermelon

  6. Dragon Fruit

  7. Raspberries

  8. Mangoes

  9. Apples

  10. Pineapples

  11. Oranges

  12. Pears

  13. Peaches

  14. Cherries

  15. Grapes

None

  • Bananas

  • Strawberries

  • Blueberries

  • Blackberries

  • Watermelon

  • Dragon Fruit

  • Raspberries

  • Mangoes

  • Apples

  • Pineapples

  • Oranges

  • Pears

  • Peaches

  • Cherries

  • Grapes

List items as links

List items as links with supporting body copy

Vertical pipes with list items as links displayed inline

Related elements