Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

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

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.