List

Large amounts of text on a page can be visually overwhelming for users. If they cannot quickly scan sections to find key points, they may leave the page. Lists visually separate items or ideas in vertical indexes of text or images. This makes it easier for users to scan, see and compare key points on a page.


Component data

Component resources:
SCSS files

Functional grouping: Text and data

Demo

Configure: select the dropdowns below to display the variety of options that lists support.

  • This is list item 1
  • This is list item 2
  • This is list item 3
    • This is nested item 1
    • This is nested item 2
    • This is nested item 3
  • This is list item 4
  • This is list item 5
  • This is list item 6, which is very long. Etiam dapibus, mi consectetur cursus porttitor, nisl ipsum porta ante, nec volutpat tellus erat at eros. Mauris pretium ultrices ante vitae iaculis.

Code


				
			

Responsive preview

Usage best practices

Consider using lists to:

  • display related items in logical ways 
  • present text and actions in a concise format
  • reduce the reading grade level of your content

Usage examples:

  • list of locations
  • process steps
  • features or benefits of a product
List variations, features and usage
Variation Unique features Usage
Bulleted list (unordered)

Contains:

  • dot row indicator

When sequential order doesn't matter i.e. list of recreation facilities

Numbered list (ordered)

Contians:

  • sequential increases in alpha/numeric row indicator

When sequential order matters i.e. steps in booking a greenspace

Description list

Contains:

  • bolded term
  • description

When terms need to be grouped with their definitions i.e. glossary

Do

Maintain sufficient space between list items. This distinguishes each row from the other.

Use the same tense or type of verb to start list items.

Choose the appropriate list for its purpose.

Don't

Do not create lists and list items that are too long (more than 8 items). This makes the list difficult to scan.

Do not nest more than two list levels inside a list. This can make it difficult for users to understand the list items.

Do not put entire paragraphs in each bullet or numbered item. This makes the list difficult to scan.

Do not use the ordered list (with numbers) unless the sequential order is required.