The List component provides ordered and unordered list elements with consistent styling.
Installation
yarn add @twilio-paste/list
Unordered List
import { UnorderedList, ListItem } from '@twilio-paste/list';
<UnorderedList>
<ListItem>First item</ListItem>
<ListItem>Second item</ListItem>
<ListItem>Third item</ListItem>
</UnorderedList>
Ordered List
import { OrderedList, ListItem } from '@twilio-paste/list';
<OrderedList>
<ListItem>First item</ListItem>
<ListItem>Second item</ListItem>
<ListItem>Third item</ListItem>
</OrderedList>
Ordered Display List
import { OrderedDisplayList, OrderedDisplayListItem, OrderedDisplayListHeading } from '@twilio-paste/list';
<OrderedDisplayList variant="heading20">
<OrderedDisplayListItem>
<OrderedDisplayListHeading>Step 1</OrderedDisplayListHeading>
Complete the first task
</OrderedDisplayListItem>
<OrderedDisplayListItem>
<OrderedDisplayListHeading>Step 2</OrderedDisplayListHeading>
Complete the second task
</OrderedDisplayListItem>
</OrderedDisplayList>
List (Base)
The HTML element type to render.
Overrides the default element name to apply unique styles with the Customization Provider.
Sets the list-style-type of the list. This is a shorthand for the CSS property.
Sets the top margin spacing.
Sets the bottom margin spacing.
ListItem
element
string
default:"LIST_ITEM"
Overrides the default element name to apply unique styles with the Customization Provider.
OrderedDisplayList
variant
'heading20' | 'heading30' | 'heading40' | 'heading50' | 'heading60'
Sets the heading variant for the ordered display list.
OrderedDisplayListHeading
element
string
default:"ORDERED_DISPLAY_LIST_HEADING"
Overrides the default element name to apply unique styles with the Customization Provider.
The HTML heading element to render.
