Code

Usage

import { List, ListItem } from "@twilio-labs/match/components";
const Component = () => (
<List>
<ListItem>Ahoy</ListItem>
<ListItem>World</ListItem>
</List>
);

List Props

PropTypeDefaultDescription
variant?ListVariant'bulleted''bulleted', 'numbered', 'icon'
size?ListSize'normal''normal', 'small'
inverse?booleanfalseUse inverse styles on dark backgrounds.

Also supports margin props.

List Item Props

PropTypeDefaultDescription
additional?stringnullSupporting text displayed below list item contents.

Guidelines

About Lists

Lists are a grouping of list items that are represented consecutively one after the other and delineated by numeric, bulleted or iconic markings. Lists may be ordered or unordered. If the meaning of the content would change be reordering the list items, use an ordered (numbered) list. Otherwise use an unordered (bulleted, icon) list.

Accessibility

Always group ListItem within a List component. When nesting lists, ensure that ListItem is a direct descendant of List.


Composition

Of the available list variants, numbered is the only one which provides semantic meaning to the order of items.

Do
  • Use bulleted or icon lists for more randomized lists.
  • Use nested lists to provide additional, related information to parent list items.
Don't
  • Use a numbered list or a nested list where items don't have a specific order.
  • Use nested lists that contain items that are unrelated to the parent list item.

Examples

Bulleted

Use the bulleted variant for lists with no significant meaning to the order of items. This is the default List variant.

  • Rufus T. Firefly
  • Otis B. Driftwood
  • Captain Geoffrey T. Spaulding

Numbered

Use the numbered variant for lists with any significance to the order of items.

  1. The Cocoanuts
  2. Animal Crackers
  3. Monkey Business
  4. Horse Feathers
  5. Duck Soup

Nested

Lists may be nested within other list items.

  1. The party of the first part shall be known in this contract as the party of the first part.
    • The first part of the party of the first part shall be known in this contract as the first part of the party of the first part.
  2. The party of the second part shall be known in this contract as the party of the second part.

Additional Text

  • Leonard Joseph Marxaka Chico
  1. Julius Henry Marxaka Groucho
  • Herbert Manfred Marxaka Zeppo

Icon

Use the icon variant for decorative lists with no significant meaning to the order of items.

  • A Night at the Opera
  • A Day at the Races
  • A Night in Casablanca

Inverse

All List variants support inverse themes.

  • Go West
  1. Room Service
  • The Big Store

Size

The List component supports normal and small sizes.

  • Arthur Marxaka Harpo
  • Milton Marxaka Gummo