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 support Supported since v105. Full support Supported since v121. Full support Supported since v16.
Price
6 950 000
Size
64 m²
Rooms
3
<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>
<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
<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>
<!--[-->
<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

  1. List (<DescriptionList>)
  2. Term-description group (<DescriptionList.Item>)
  3. Term (<DescriptionList.Term>)
  4. Separator — rendered via CSS when bordered is set on the list (optional)
  5. Description (<DescriptionList.Description>)
Price
6 950 000

API

Prop Type Default Description
bordered boolean | "dotted" - Adds a separator between the term and description on all items. Use "dotted" for a dotted style.
class string - Custom CSS classes.

DescriptionList.Item

Prop Type Default Description
class string - Custom CSS classes.

DescriptionList.Term

Prop Type Default Description
class string - Custom CSS classes.

DescriptionList.Description

Prop Type Default Description
class string - Custom CSS classes.

Browser support

Full support Supported since v105. Full support Supported since v121. Full support Supported 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;
        }
      }
    }
  }
}