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

    Full supportSupported since v105.Full supportSupported since v121.Full supportSupported since v16.

    Anatomy

    Price
    6 950 000

    • dl.ui-description-list

      Container element.

    • .ui-item

      Groups a term with its description.

    • <dt>

      The term.

    • <dd>

      The description.

    Price
    6 950 000
    Size
    64 m²
    Rooms
    3
    <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
    <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>

    API

    Description list API

    TypeModifiersDefaultDescription
    Bordered.ui-bordered, .ui-bordered.ui-dotted-Adds a border between the term and the description.

    Parts

    PartDescription
    dl.ui-description-listContainer element.
    .ui-itemGroups a term with its description.
    <dt>The term.
    <dd>The description.

    Browser support

    Full supportSupported since v105.Full supportSupported since v121.Full supportSupported since v16.

    See also the full browser support guide.

    Installation

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