Description List

Base element styles for <dl>, <dt>, and <dd>. Resets margins and provides consistent defaults.

---

Base Reset

Selector	Property	Value
dl	margin	0
dt	font-weight	var(--font-weight-medium)
dd	margin-left	0

Preview

<dl>
  <dt>Term</dt>
  <dd>Definition of the term.</dd>
</dl>

Term

Definition of the term.

---

Variants

.detail-row

Horizontal key-value row with bottom border, used for product details.

Class	Purpose
.detail-row	Flex row with gap, padding, and border-bottom
.detail-row dt	Secondary color label with min-width

<dl>
  <div class="detail-row">
    <dt>Material</dt>
    <dd>100% organic cotton, 180g/m&sup2;</dd>
  </div>
  <div class="detail-row">
    <dt>Fit</dt>
    <dd>Regular fit, unisex</dd>
  </div>
  <div class="detail-row">
    <dt>Print</dt>
    <dd>Water-based screen print</dd>
  </div>
</dl>

Material

100% organic cotton, 180g/m²

Fit

Regular fit, unisex

Print

Water-based screen print

<dl>
  <div class="detail-row">
    <dt>Material</dt>
    <dd>100% organic cotton</dd>
  </div>
  <div class="detail-row">
    <dt>Fit</dt>
    <dd>Regular, unisex</dd>
  </div>
</dl>