Paste assistant Assistant
Figma
Star

List

A List is a set of text objects in a bulleted or numbered format.

yarn add @twilio-paste/list - or - yarn add @twilio-paste/core
import {OrderedList, UnorderedList, ListItem} from '@twilio-paste/core/list';

const Component = () => (
  <UnorderedList>
    <ListItem>Point one</ListItem>
    <ListItem>Point two</ListItem>
    <ListItem>Point three</ListItem>
  </UnorderedList>
);

const Component = () => (
  <OrderedList>
    <ListItem>Point one</ListItem>
    <ListItem>Point two</ListItem>
    <ListItem>Point three</ListItem>
  </OrderedList>
);

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'LIST_ITEM'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'LIST'

marginBottom

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }

marginTop

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'LIST'

marginBottom

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }

marginTop

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'LIST'

marginBottom

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }

marginTop

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 38 more ... | { ...; }

variant

Type
OrderedDisplayListVariants

element

Type
string

OrderedDisplayListHeading

OrderedDisplayListHeading page anchor

as

Type
AsTags

element

Type
string

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.