Components

Description list

Price: 6 950 000

<DescriptionList>
Container element.
<DescriptionListItem>
Groups a term with its description.
<DescriptionListTerm>
The term.
<Description>
The description.

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

Vue

<script setup lang="ts">
import {
  Description,
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
} from "opui-css/vue"
</script>

<template>
  <DescriptionList>
    <DescriptionListItem>
      <DescriptionListTerm>Price</DescriptionListTerm>
      <Description>6 950 000</Description>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Size</DescriptionListTerm>
      <Description>64 m²</Description>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Rooms</DescriptionListTerm>
      <Description>3</Description>
    </DescriptionListItem>
  </DescriptionList>
</template>

Output

<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

Vue

<script setup lang="ts">
import {
  Description,
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
} from "opui-css/vue"
</script>

<template>
  <DescriptionList bordered>
    <DescriptionListItem>
      <DescriptionListTerm>Price</DescriptionListTerm>
      <Description>6 950 000</Description>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Size</DescriptionListTerm>
      <Description>64 m²</Description>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Rooms</DescriptionListTerm>
      <Description>3</Description>
    </DescriptionListItem>
  </DescriptionList>

  <DescriptionList bordered="dotted">
    <DescriptionListItem>
      <DescriptionListTerm>Price</DescriptionListTerm>
      <Description>6 950 000</Description>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Size</DescriptionListTerm>
      <Description>64 m²</Description>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Rooms</DescriptionListTerm>
      <Description>3</Description>
    </DescriptionListItem>
  </DescriptionList>
</template>

Output

<!--[-->
<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

Prop	Type	Default	Description
`bordered`	`boolean`, `"dotted"`	`false`	Adds a border between the term and the description.

Slots

Slot	Description
`default`	The items.

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

Description list

Anatomy

Bordered

API

Description list API

Slots

Browser support

Installation