Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

List

Version 8.1.2GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/list - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
);

Props

Props page anchor

ListItem

ListItem page anchor

element

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

Type
string
Default
'LIST_ITEM'

OrderedList

OrderedList page anchor

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" | ... 27 more ... | { ...; }

marginTop

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

UnorderedList

UnorderedList page anchor

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" | ... 27 more ... | { ...; }

marginTop

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