Lists

Group related content items together either vertically or horizontally

Bare

Collect items to be displayed in a list when items are not marked with bullets. This is the default and is also known as unordered and undecorated “bare” list.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Unordered

Collect related items that don’t need to be in a specific order or sequence. List items are typically marked with bullets.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Ordered

Collect related items with numeric order or sequence. Numbering starts at 1 with the first list item and increases by increments of 1 for each successive ordered list item.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Inline

Display items horizontally with no divider.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Inline - Unordered

Display items horizontally, separated by a bullet character.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Organize lists so users can understand the relationship and grouping of information
  • Use explicit list markup that allows users to:
    • Rapidly browse
    • Navigate a page using list content
    • Announce the number of items in each list when using screen readers

When creating nested lists, ensure they are coded properly. Always check that:

  • List items are contained within one list
  • Spacing does not break a list into multiple individual points
  • Proper semantic tags are used - either <ol> or <ul>
  • Proper structure is used to provide a visual list, do not rely on indentation
  • Special characters are not used to create a list

This component has compliance with WCAG guidelines by:

  • Providing ability to create structured lists. Lists are easier to navigate than simple tables