Components

Description list

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

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

HTML

<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

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

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

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

HTML

<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

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

Price: 6 950 000

HTML

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

API

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

Browser support

See also the full browser support guide.

Installation

description-list.css

@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;
        }
      }
    }
  }
}