List

A vertical display of multiple items with similar content.

Content

Copy guidelines

List items are related and should refer to similar types of things.

  • Aim for sentences with similar length
  • Use the same sentence structure
  • Don’t start each line with the same word
  • Sentence case
  • Keep each line concise, no paragraphs. 1 sentence is preferable.
Do
List-DoDont-Copy-Do
Don’t
List-DoDont-Copy-Dont

 

Punctuation

By default, do not use punctuation unless:

  • A sentence ends in an exclamation point or question mark
  • One line contains two sentences

 

Types

Use 5 different types of lists depending on the their function. When to use each:

  • Numbers: default for ordered lists. Use when the order of the steps is important.
  • Bullet points: default for unordered list. Use for more serious content and when the order of the steps is not important.
  • Checks: unordered list often. Use for marketing content, ex: lists of features.
  • Check list: unordered list of items to be completed. Use for password specs.
  • Icons: unordered list with personality. Use for less serious content.
  • Illustrations: another unordered list with personality. Use when horizontal space is not an issue.
List-Example-Type-Number
List-Example-Type-Bullet
List-Example-Type-Check

 

List-Example-Type-Checklist
List-Example-Type-Icons
List-Example-Type-Illustrations

 

Check vs Checklist

Check

Use the check variant when listing items that are included in a grouping, such as benefits.

List-Example-CheckvChecklist-Check

 

Checklist

Use the checklist variant when listing required steps that are completed one-by-one.

List-Example-CheckvChecklist-Checklist

 

Placement

Additional levels

Indent additional levels 20px. Space levels 20px apart. Use a maximum of 3 levels. Multi-level lists are typically bullet-points (rather than checks, numbers or icons.)

List-Example-AdditionalLevels

 

Best Practices

Number of Lines

Lists come with 3 lines by default, which is the preferred list number. Work with content design to keep lists concise.

Do
List-DoDont-NumberofLines-Do

 

Don’t
List-DoDont-NumberofLines-Dont

 

Titles

Use the default heading style for the list title. If needed, swap with another heading style. If needed, the component allows for hiding the title.

Default
List-Example-Title-Default
Adjusted Title Size
List-Example-Title-Adjusted
Hidden Title
List-Example-Title-Hidden

 

Descriptions

If your content requires additional information, include descriptions. This feature is turned off by default.

List-Example-Descriptions

 

Dividers

If content needs clear separation, add dividers. This feature is turned off by default.

List-Example-Dividers

 

Resources

(internal only)

Figma

Storybook

Enhancements