List

List can be used to show semantically related items or options. For example, a “Ports” header under a product’s technical specifications section, listing USB, power adapter, ethernet, and other included ports. List items may also be links, such as a list of resources attached to an article for further reading.

Complex processes may be hard for a user to digest and thus require a list of steps. This could include the actions that must be taken to enroll in a program, or an escalation of steps to take to correct a problem.

Navigational items are often shown as a list of links to allow users to easily scan an overview of available pages.

In the Figma UI kit, list is available with two text styles: body 1 and body 2. You can read more about the font ramp on the typography foundations page.

Vertically-stacked (listed) links should have a line height of 24 pixels or greater

This guideline creates a minimum distance between touch targets for anyone who experiences difficulties with fine motor control. The simplest and easiest way to meet this guideline is to apply the default body style (16 pixels with a line height of 24 pixels) or larger to your stacked links.

If the links are the small variant (12 pixels) or have a custom type style applied, ensure they have a minimum 24 pixel line-height. While inline links are exempt from this requirement, styling them with 16 pixel default body or greater is still recommended.
WCAG 2.1: 2.5.8 Target Size (Minimum)

Formatting
Keep formatting consistent. Whether list items are written as sentences or fragments, keep all items in the same format.
Do:
Things to do on vacation:
Take a walk on the beach.
Explore a historic town.
Sleep in until noon.
Don’t:
Things to do on vacation:
take a walk on the beach
explore a historic town
Sleep in until noon.

Repetition
Avoid repeating the first word in each list item.
Do:
Reasons to take a break:
Take a shower.
Go for a walk.
Enjoy a short nap.
Don’t:
Reasons to take a break:
Take a shower.
Take a walk.
Take a nap.

List item order
Only use ordered lists when the order of items is important.
Do:
Product return process:
Place items in original packaging
Contact Customer Returns
Add RMA to shipping label
Drop off at UPS or FedEx location
Don’t:
How to contact Customer Support:
Email
Phone
By mail
In person

Capitalization
Begin each list item with a capital letter if it is a complete sentence. If the list item is a fragment, it may be sentence case following a colon in the sentence preceding the list.

Punctuation
If list items are complete sentences, they should end with a period or the appropriate punctuation. If the list item is a fragment, punctuation is not required.