• Price6 950 000
• Size64 m²
• Rooms3

<ul class="definition-list">
  <li>
    <span class="term">Price</span>
    <span class="description">6 950 000</span>
  </li>
</ul>

Bordered

• Price

  ---

  6 950 000
• Size

  ---

  64 m²
• Rooms

  ---

  3

• Price

  ---

  6 950 000
• Size

  ---

  64 m²
• Rooms

  ---

  3

<ul class="definition-list">
  <li>
    <span class="term">Price</span>
    <hr />
    <span class="description">6 950 000</span>
  </li>
</ul>

<ul class="definition-list dotted">
  <li>
    <span class="term">Price</span>
    <hr />
    <span class="description">6 950 000</span>
  </li>
</ul>

Anatomy

1. List
2. List item
3. Term
4. Horizontal rule (optional)
5. Description

• Price

  ---

  6 950 000

API

Type	Modifiers	Default	Description
Bordered	default, &.dotted	-	Optional horizontal rule style

Browser compatibility

Installation

definition-list.css

@layer components.base {
  :where(.definition-list) {
    --_border-style: solid;
    --_border-width: 1px;

    display: grid;
    gap: var(--size-3);
    padding: 0;

    &.dotted {
      --_border-style: dotted;
      --_border-width: 2px;
    }

    li {
      display: grid;
      margin: 0;
      padding: 0;

      .term {
        display: block;
        font-weight: 700;
        overflow: hidden;
        position: relative;
      }

      hr {
        display: none;
        margin: 0;
      }
    }

    @container (width > 45ch) {
      gap: var(--size-1);

      li {
        align-items: baseline;
        display: grid;
        gap: var(--size-1);
        grid-template-columns: 1fr auto;

        &:has(hr) {
          grid-template-columns: auto 1fr auto;
        }

        hr {
          background-color: transparent;
          border-block-end: var(--_border-width) var(--_border-style)
            var(--border-color);
          block-size: 2px;
          display: block;
        }

        .term {
          &:after {
            display: inline-block;
          }
        }
        .description {
          color: var(--text-color-2);
        }
      }
    }
  }
}