BRAID
Braid Logo
 

List

  • Bullet
  • Bullet
  • Bullet
  1. Number
  2. Number
  3. Number
  1. Alpha
  2. Alpha
  3. Alpha
  1. Roman
  2. Roman
  3. Roman
  • Icon
  • Icon
  • Icon
Open in Playroom

Accessibility

List semantics are handled for you automatically, including the use of ordered lists where appropriate.

Types of lists

A List can select a delimiter for its items by specifying the type prop, with supported values being bullet, number, alpha and roman characters.
A type of icon may also be used, which then requires an icon component be provided to the icon prop.
  • Bullet
  • Bullet
  • Bullet
  1. Number
  2. Number
  3. Number
  1. Alpha
  2. Alpha
  3. Alpha
  1. Roman
  2. Roman
  3. Roman
  • Icon
  • Icon
  • Icon
Open in Playroom

Tone, size and space

Lists support the same sizes and tones as Text, and the same spacing as Stack.
  • Large
  • Large
  • Large
  • Standard
  • Standard
  • Standard
  • Small
  • Small
  • Small
  • Xsmall
  • Xsmall
  • Xsmall
Open in Playroom

Rich content

You can use a Stack as a list item to display multiple lines of text.
  • This is a paragraph.
    This is another paragraph.
  • This is a paragraph.
    This is another paragraph.
Open in Playroom

Nested lists

Lists of varying types can be nested within each other.
  1. Number list
    1. Alpha list
    2. Alpha list
    3. Alpha list
  2. Number list
    1. Alpha list
    2. Alpha list
    3. Alpha list
Open in Playroom

Custom start position

Lists can be started from a higher number if needed.
  1. Number
  2. Number
  3. Number
  1. Alpha
  2. Alpha
  3. Alpha
  1. Roman
  2. Roman
  3. Roman
Open in Playroom