Pluma

Theme

About

MCP Server

Getting started

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

List

Github

Storybook

Legacy component

List a group of text-only content.

Importing

A list consists of two components:

List - wraps the list items (renders a ul or ol tag)
ListItem - the individual list items (li tags)

The components can be imported via:

import { 
	List, 
	ListItem 
} from '@customerio/pluma-components/react';

Usage

Use the List component as the container, and place ListItem components as its children:

Australian Magpie
Galah
Rainbow Lorikeet

<List>
	<ListItem>Australian Magpie</ListItem>
	<ListItem>Galah</ListItem>
	<ListItem>Rainbow Lorikeet</ListItem>
</List>

Type

By default, the component will render an unordered (ul) list. To render an ordered (ol) list instead, set the type prop to ordered:

Australian Magpie
Galah
Rainbow Lorikeet

<List
	type="ordered"
>
	<ListItem>Australian Magpie</ListItem>
	<ListItem>Galah</ListItem>
	<ListItem>Rainbow Lorikeet</ListItem>
</List>

Style

To change the bullet or number style, use the styleType prop. Supported values are:

none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman

Australian Magpie
Galah
Rainbow Lorikeet

<List
	styleType="none"
>
	<ListItem>Australian Magpie</ListItem>
	<ListItem>Galah</ListItem>
	<ListItem>Rainbow Lorikeet</ListItem>
</List>

Australian Magpie
Galah
Rainbow Lorikeet

<List
	styleType="circle"
>
	<ListItem>Australian Magpie</ListItem>
	<ListItem>Galah</ListItem>
	<ListItem>Rainbow Lorikeet</ListItem>
</List>

Gap

To change the gap between list items, use the gap prop, which accepts a space token value.

Australian Magpie
Galah
Rainbow Lorikeet

<List
	gap="100"
>
	<ListItem>Australian Magpie</ListItem>
	<ListItem>Galah</ListItem>
	<ListItem>Rainbow Lorikeet</ListItem>
</List>

Australian Magpie
Galah
Rainbow Lorikeet

<List
	gap="300"
>
	<ListItem>Australian Magpie</ListItem>
	<ListItem>Galah</ListItem>
	<ListItem>Rainbow Lorikeet</ListItem>
</List>

API

`PlumaList` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"italic" | "normal" | undefined`

The font style. _{^{(See MDN font-style)}}

`gap` `"0" | "025" | "050" | "075" | "100" | "125" | "150" | "175" | "200" | "225" | "250" | "275" | "300" | "350" | "400" | "450" | "500" | "600" | "800" | "900" | "1000" | "1200" | "1600" | "2000" | "2400" | "2800" | "3200" | "icon-lg" | "icon-md" | "icon-sm" | "icon-v2-lg" | "icon-v2-md" | "icon-v2-sm" | "icon-v2-xl" | "icon-xl" | "icon-xs" | "icon-xxs" | "padding-button-medium" | "padding-button-small" | "padding-header" | undefined`

The margin to apply between list items.

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`styleType` `"none" | "square" | "circle" | "disc" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | undefined`

The list-style-type to apply to the list items.

`text` `"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`type` `"ordered" | "unordered" | undefined`

Default:'unordered'

Whether the list should render a ul (unordered) or ol (ordered) tag.

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

`PlumaListItem` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"italic" | "normal" | undefined`

The font style. _{^{(See MDN font-style)}}

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`styleType` `"none" | "square" | "circle" | "disc" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | undefined`

The list-style-type to apply to the list items.

`text` `"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

List

Importing

Usage

Type

Style

Gap

API

PlumaList extends Text

color "critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined

family "mono" | "sans" | undefined

fontStyle "italic" | "normal" | undefined

size "button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined

styleType "none" | "square" | "circle" | "disc" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | undefined

type "ordered" | "unordered" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

PlumaListItem extends Text

color "critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined

family "mono" | "sans" | undefined

fontStyle "italic" | "normal" | undefined

size "button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined

styleType "none" | "square" | "circle" | "disc" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

On this page

`PlumaList` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"italic" | "normal" | undefined`

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

`styleType` `"none" | "square" | "circle" | "disc" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | undefined`

`type` `"ordered" | "unordered" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

`PlumaListItem` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"italic" | "normal" | undefined`

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

`styleType` `"none" | "square" | "circle" | "disc" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`