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.