DescriptionList

Github

Storybook

Organize and explain a group of terms and their descriptions.

Importing

A description list consists of three components:

DescriptionList - wraps the description list (a dl tag)
DescriptionListTerm - the term (a dt tag)
DescriptionListDetails - the details (a dd tag)

The components can be imported via:

import { 
	DescriptionList, 
	DescriptionListTerm, 
	DescriptionListDetails 
} from '@customerio/pluma-components/react';

Usage

Use the DescriptionList component as the container, and place DescriptionListTerm components and their DescriptionListDetails components inside:

Australian Magpie: Intelligent, vocal, territorial, striking black-and-white bird
Galah: Pink and grey parrot with playful behavior and distinctive crest
Rainbow Lorikeet: Colorful parrot with vibrant plumage and a playful, energetic nature'

<DescriptionList>
	<DescriptionListTerm>
		Australian Magpie
	</DescriptionListTerm>
	<DescriptionListDetails>
		Intelligent, vocal, territorial, striking black-and-white bird
	</DescriptionListDetails>

	<DescriptionListTerm>
		Galah
	</DescriptionListTerm>
	<DescriptionListDetails>
		Pink and grey parrot with playful behavior and distinctive crest
	</DescriptionListDetails>

	<DescriptionListTerm>
		Rainbow Lorikeet
	</DescriptionListTerm>
	<DescriptionListDetails>
		Colorful parrot with vibrant plumage and a playful, energetic nature'
	</DescriptionListDetails>
</DescriptionList>

Layout

The list can also be rendered in a horizontal layout by setting the layout prop to "horizontal":

Australian Magpie: Intelligent, vocal, territorial, striking black-and-white bird
Galah: Pink and grey parrot with playful behavior and distinctive crest
Rainbow Lorikeet: Colorful parrot with vibrant plumage and a playful, energetic nature'

<DescriptionList
	layout="horizontal"
>
	<DescriptionListTerm>
		Australian Magpie
	</DescriptionListTerm>
	<DescriptionListDetails>
		Intelligent, vocal, territorial, striking black-and-white bird
	</DescriptionListDetails>

	<DescriptionListTerm>
		Galah
	</DescriptionListTerm>
	<DescriptionListDetails>
		Pink and grey parrot with playful behavior and distinctive crest
	</DescriptionListDetails>

	<DescriptionListTerm>
		Rainbow Lorikeet
	</DescriptionListTerm>
	<DescriptionListDetails>
		Colorful parrot with vibrant plumage and a playful, energetic nature'
	</DescriptionListDetails>
</DescriptionList>

Additionally, the terms can be right aligned (only in the horizontal layout), with the termAlignment prop:

Australian Magpie: Intelligent, vocal, territorial, striking black-and-white bird
Galah: Pink and grey parrot with playful behavior and distinctive crest
Rainbow Lorikeet: Colorful parrot with vibrant plumage and a playful, energetic nature'

<DescriptionList
	layout="horizontal"
	termAlignment="right"
>
	<DescriptionListTerm>
		Australian Magpie
	</DescriptionListTerm>
	<DescriptionListDetails>
		Intelligent, vocal, territorial, striking black-and-white bird
	</DescriptionListDetails>

	<DescriptionListTerm>
		Galah
	</DescriptionListTerm>
	<DescriptionListDetails>
		Pink and grey parrot with playful behavior and distinctive crest
	</DescriptionListDetails>

	<DescriptionListTerm>
		Rainbow Lorikeet
	</DescriptionListTerm>
	<DescriptionListDetails>
		Colorful parrot with vibrant plumage and a playful, energetic nature'
	</DescriptionListDetails>
</DescriptionList>

API

`PlumaDescriptionList` `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)}}

`layout` `"horizontal" | "vertical" | undefined`

Default:'vertical'

Whether the description list should render in a vertical or horizontal layout.

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

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

`termAlignment` `"left" | "right" | undefined`

Default:'vertical'

Whether the terms (titles) should be left or right aligned when in a horizontal layout.

`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)}}

`PlumaDescriptionListTerm` `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)}}

`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)}}

`PlumaDescriptionListDetails` `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)}}

`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)}}

DescriptionList

Importing

Usage

Layout

API

PlumaDescriptionList 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

layout "horizontal" | "vertical" | undefined

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

termAlignment "left" | "right" | undefined

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

PlumaDescriptionListTerm 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

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

PlumaDescriptionListDetails 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

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

On this page

`PlumaDescriptionList` `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`

`layout` `"horizontal" | "vertical" | undefined`

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

`termAlignment` `"left" | "right" | undefined`

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

`PlumaDescriptionListTerm` `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`

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

`PlumaDescriptionListDetails` `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`

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