Appearance

Description List ​

The Description List component is used to display a list of terms and their descriptions.

Basic Usage ​

Order no
#123123
Quantity
3
Category
Flower
template
<DescriptionList>
  <DescriptionListGroup>
    <DescriptionListTerm>Order no</DescriptionListTerm>
    <DescriptionListDetail>#123123</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Quantity</DescriptionListTerm>
    <DescriptionListDetail>3</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Category</DescriptionListTerm>
    <DescriptionListDetail>Flower</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Variants ​

Columns ​

The columns variant will display the DescriptionListTerm and DescriptionListDetail components in two columns.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
template
<DescriptionList>
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Inline ​

The inline variant will display the DescriptionListTerm and DescriptionListDetail components inline.

Address:
1234 Main St
Extended address:
apt 301
Country:
United States
State:
California
Long text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
template
<DescriptionList variant="inline">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Stacked ​

The stacked variant will stack the DescriptionListTerm and DescriptionListDetail components on top of each other.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
template
<DescriptionList variant="stacked">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

The stacked variant also supports css grid layout, so you can specify the number of columns you want to display.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
Long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
City
Los Angeles
template
<DescriptionList variant="stacked" class="tw-grid tw-grid-cols-2">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Long text</DescriptionListTerm>
    <DescriptionListDetail>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>City</DescriptionListTerm>
    <DescriptionListDetail>Los Angeles</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>
Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
template
<DescriptionList variant="stacked" class="tw-grid tw-grid-cols-3">
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

Space Between ​

DescriptionTerm and DescriptionDetail components can be spaced between each other by setting the space-between variant to the DescriptionList component.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California

Divide ​

You can add a divider between each list item by adding the divide prop to the DescriptionList component.

Address
1234 Main St
Extended address
apt 301
Country
United States
State
California
template
<DescriptionList variant="space-between" divide>
  <DescriptionListGroup>
    <DescriptionListTerm>Address</DescriptionListTerm>
    <DescriptionListDetail>1234 Main St</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Extended address</DescriptionListTerm>
    <DescriptionListDetail>apt 301</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>Country</DescriptionListTerm>
    <DescriptionListDetail>United States</DescriptionListDetail>
  </DescriptionListGroup>
  <DescriptionListGroup>
    <DescriptionListTerm>State</DescriptionListTerm>
    <DescriptionListDetail>California</DescriptionListDetail>
  </DescriptionListGroup>
</DescriptionList>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.