Components

Description list

Price: 6 950 000
Size: 64 m²
Rooms: 3

HTML

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

Bordered

Add .ui-bordered to the <dl> element. For a dotted style, also add .ui-dotted.

Price: 6 950 000
Size: 64 m²
Rooms: 3

Price: 6 950 000
Size: 64 m²
Rooms: 3

HTML

<dl class="ui-description-list ui-bordered">
  <div class="ui-item">
    <dt class="ui-term">Price</dt>
    <dd class="ui-description">6 950 000</dd>
  </div>
  <div class="ui-item">
    <dt class="ui-term">Size</dt>
    <dd class="ui-description">64 m²</dd>
  </div>
  <div class="ui-item">
    <dt class="ui-term">Rooms</dt>
    <dd class="ui-description">3</dd>
  </div>
</dl>

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

Anatomy

List (<dl>)
Term-description group (<div>)
Term (<dt>)
Separator — rendered via CSS when .ui-bordered is set on the list (optional)
Description (<dd>)

Price: 6 950 000

HTML

<dl class="ui-description-list ui-bordered ui-dotted anatomy">
  <div class="ui-item">
    <dt class="ui-term">Price</dt>
    <dd class="ui-description">6 950 000</dd>
  </div>
</dl>

API

Type	Modifiers	Default	Description
Bordered	`.ui-bordered`, `.ui-bordered.ui-dotted`	-	Adds a separator between the term and description on all items. Add `.ui-dotted` for a dotted style.

Browser support

See also the full browser support guide.

Installation

description-list.css

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

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

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

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

      dt,
      .ui-term {
        display: block;
        font-weight: 700;
        overflow: hidden;
        position: relative;
      }

      dd {
        margin: 0;
      }
    }

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

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

        dt,
        .ui-term {
          inline-size: max-content;

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

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

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

        dt,
        .ui-term {
          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;
        }
      }
    }
  }
}