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

    • <DescriptionList>

      Container element.

    • <DescriptionList.Item>

      Groups a term with its description.

    • <DescriptionList.Term>

      The term.

    • <DescriptionList.Description>

      The description.

    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="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

    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="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

    PropTypeDefaultDescription
    borderedboolean, "dotted"falseAdds a border between the term and the description.

    Slots

    SlotDescription
    defaultThe items.

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