Definition lists

Only use definition lists for just that – lists of definitions.

Jump to a component:

Default definition lists

Use a default definition list when listing out items with a term and definition relationship.

Styling

The term is bold and the definition is on a new line.

How to use for Default definition lists

Add in the HTML (see “development info”).

Development info for Default definition lists

Stylesheet location: /_source/styles/base/_typography.scss

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>
Example of Default definition lists
This is the word or phrase to be defined in this definition list.
And this is the definition – it has a link.
This is the word or phrase to be defined in this definition list.
And this is the definition.

Concise definition lists

Use a concise list for definition lists with short items, or definition lists you want to be in a condensed format.

Styling

Concise definition lists look just like default definition lists, but the term and definition are on the same line.

How to use for Concise definition lists

Add in the HTML (see “development info”).

Development info for Concise definition lists

Stylesheet location: /_source/styles/base/_typography.scss

<dl class="concise">
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>
Example of Concise definition lists
Term 1:
Definition for term 1.
Term 2:
Definition for term 2.