List

Principles

Use when

1. specifying and presenting essential information in a particular sequence related to content.

Don't use when

1. the details need to be provided for a button or another UI element, and furthermore, this detailed information does not carry primary value, use a tooltip instead.
2. when making a general announcement on the layout level; instead, use notification.

Structure

1. List item
2. Nested list item

Properties

Types

Bulleted

Used when listing items that require certain instructions in a non-ordered manner—however, be cautious when listing items by importance in notifications and implication sections on modals.

Dashed (hypen)

Used for a less formal list or when items do not need specific order or emphasis.

Numbered

Used to list items in a specific sequence or when the order is important such as giving a task or process to the user.

Lettered

Used to list items in a specific sequence with letters, often for formal or educational contexts.

Nesting (boolean)

List items can be nested due to their order type. un-ordered types can be nested each other as well as the orders types.

Content

Use sentence case for each labels, and avoid using comma and semicolons.

Also do not place a period at the end of the each label or sentence.

Figma source