Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Components

Description list

Description lists are used to display a list of terms and their descriptions.

Full support Supported since v105. Full support Supported since v121. Full support Supported since v16.
Price
6 950 000
Size
64 m²
Rooms
3
---
import { DescriptionList } from "@opui/astro"
---


<DescriptionList>
  <DescriptionList.Item>
    <DescriptionList.Term>Price</DescriptionList.Term>
    <DescriptionList.Description>6 950 000</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Size</DescriptionList.Term>
    <DescriptionList.Description>64 m²</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Rooms</DescriptionList.Term>
    <DescriptionList.Description>3</DescriptionList.Description>
  </DescriptionList.Item>
</DescriptionList>
<dl class="description-list">
  <div class="item">
    <dt class="term">Price</dt>
    <dd class="description">6 950 000</dd>
  </div>
  <div class="item">
    <dt class="term">Size</dt>
    <dd class="description">64 m²</dd>
  </div>
  <div class="item">
    <dt class="term">Rooms</dt>
    <dd class="description">3</dd>
  </div>
</dl>

Bordered

Set bordered on DescriptionList to add a separator between the term and description on all items. Use bordered="dotted" for a dotted style.

Price
6 950 000
Size
64 m²
Rooms
3
Price
6 950 000
Size
64 m²
Rooms
3
---
import { DescriptionList } from "@opui/astro"
---


<DescriptionList bordered>
  <DescriptionList.Item>
    <DescriptionList.Term>Price</DescriptionList.Term>
    <DescriptionList.Description>6 950 000</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Size</DescriptionList.Term>
    <DescriptionList.Description>64 m²</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Rooms</DescriptionList.Term>
    <DescriptionList.Description>3</DescriptionList.Description>
  </DescriptionList.Item>
</DescriptionList>


<DescriptionList bordered="dotted">
  <DescriptionList.Item>
    <DescriptionList.Term>Price</DescriptionList.Term>
    <DescriptionList.Description>6 950 000</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Size</DescriptionList.Term>
    <DescriptionList.Description>64 m²</DescriptionList.Description>
  </DescriptionList.Item>
  <DescriptionList.Item>
    <DescriptionList.Term>Rooms</DescriptionList.Term>
    <DescriptionList.Description>3</DescriptionList.Description>
  </DescriptionList.Item>
</DescriptionList>
<dl class="description-list bordered">
  <div class="item">
    <dt class="term">Price</dt>
    <dd class="description">6 950 000</dd>
  </div>
  <div class="item">
    <dt class="term">Size</dt>
    <dd class="description">64 m²</dd>
  </div>
  <div class="item">
    <dt class="term">Rooms</dt>
    <dd class="description">3</dd>
  </div>
</dl>
<dl class="description-list bordered dotted">
  <div class="item">
    <dt class="term">Price</dt>
    <dd class="description">6 950 000</dd>
  </div>
  <div class="item">
    <dt class="term">Size</dt>
    <dd class="description">64 m²</dd>
  </div>
  <div class="item">
    <dt class="term">Rooms</dt>
    <dd class="description">3</dd>
  </div>
</dl>

Anatomy

  1. List (<DescriptionList>)
  2. Term-description group (<DescriptionList.Item>)
  3. Term (<DescriptionList.Term>)
  4. Separator — rendered via CSS when bordered is set on the list (optional)
  5. Description (<DescriptionList.Description>)
Price
6 950 000

API

Prop Type Default Description
bordered boolean | "dotted" - Adds a separator between the term and description on all items. Use "dotted" for a dotted style.
class string - Custom CSS classes.

DescriptionList.Item

Prop Type Default Description
class string - Custom CSS classes.

DescriptionList.Term

Prop Type Default Description
class string - Custom CSS classes.

DescriptionList.Description

Prop Type Default Description
class string - Custom CSS classes.

Browser support

Full support Supported since v105. Full support Supported since v121. Full support Supported since v16.

See also the full browser support guide.

Installation

@layer components.root {
  :where(.description-list) {
    --_border-style: solid;
    --_border-width: 1px;


    display: grid;
    gap: var(--size-3);
    margin: 0;
    padding: 0;


    &.dotted {
      --_border-style: dotted;
      --_border-width: 2px;
    }


    .item {
      display: grid;
      margin: 0;
      padding: 0;


      dt {
        display: block;
        font-weight: 700;
        overflow: hidden;
        position: relative;
      }


      dd {
        margin: 0;
      }
    }


    @container (width > 45ch) {
      gap: var(--size-1);


      .item {
        align-items: baseline;
        display: grid;
        gap: var(--size-1);
        grid-template-columns: 1fr auto;


        dt {
          inline-size: max-content;


          &::after {
            display: inline-block;
          }
        }


        dd {
          color: var(--text-muted);
          text-align: end;
        }
      }


      &.bordered .item {
        grid-template-columns: auto 1fr auto;


        dt {
          order: 0;
        }


        dd {
          order: 2;
        }


        &::after {
          background-color: transparent;
          block-size: 2px;
          border-block-end: var(--_border-width) var(--_border-style) var(--border-color);
          content: "";
          order: 1;
        }
      }
    }
  }
}