Definition

A list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). Mozilla Developer docs definition

Usage

To use a stacked (default) defined list, add a class of Definition to the dl tag:

Item title: Item definition
Item 2 title: Item 2 definition one; Item 2 definition two; Item 2 definition three

<dl class="c-definition">
  <dt>Item title</dt>
  <dd>Item definition</dd>
  <dt>Item 2 title</dt>
  <dd>Item 2 definition one</dd>
  <dd>Item 2 definition two</dd>
  <dd>Item 2 definition three</dd>
</dl>

Modifiers

Bullets (.c-definition__bullets)

Item title: Item definition
Item 2 title: Item 2 definition one; Item 2 definition two

<dl class="c-definition c-definition__bullets">
  <dt>Item title</dt>
  <dd>Item definition</dd>
  <dt>Item 2 title</dt>
  <dd>Item 2 definition one</dd>
  <dd>...</dd>
</dl>

Horizonal (.c-definition__horizontal)

To show a horizontal list, use the c-definition class with the modifier class of c-definition__horizontal.

Mint: an aromatic plant native to temperate regions of the Old World, several kinds of which are used as culinary herbs.; a peppermint sweet.; slang for 'Nice' or 'Cool'
More definitions than you can shake a stick at: A swimming predator.
Water: A liquid comprising of 2 hydrogen atoms and one oxygen atom.
Penguin: A flightless bird often associated with the arctic but also found in temperate climates.

<dl class="c-definition c-definition__horizontal">
  <dt>Mint</dt>
  <dd>A refreshing herb</dd>
  <dt>Shark</dt>
  <dd>A swimming predator</dd>
  <dt>Water</dt>
  <dd>A liquid comprising of 2 hydrogen atoms and one oxygen atom</dd>
  <dt>Penguin</dt>
  <dd>A flightless bird often associated with the arctic but also found in temperate climates</dd>
</dl>