§ 4.8 Definition Lists

The dl element is for another type of list called a definition list. Instead of list items, the content of a dl consists of dt (Definition Term) and dd (Definition Description) pairs.

TypePlate offers several different patterns for definition lists. In all three of the examples below, the contents of dts are wrapped in b tags, and a class of .micro is given to the contents of dds. First is the default format for definitions lists.

a) Multi-line Definitions (default)

This is a term
this is the definition of that term, which both live in a dl.
Another Term
And it gets a definition too, which is this line
This is a 2nd definition for a single term. A dt may be followed by multiple dds.
HTML
<dl>
	<dt><b></b></dt>
	<dd></dd>
</dl>

b) Inline Definitions

The second format for definition lists is lining. This style is more robust, with support for multiple terms defined by a single definition, and applies proper punctuation (: ,) where appropriate:

This is a term
this is the definition of that term, which both live in a dl.
Another Term
And it gets a definition too, which is this line
this is a 2nd definition for a single term.
Term
Other Defined Term
dt terms may stand on their own without an accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.
HTML
<dl class="lining">
	<dt><b></b></dt>
	<dd></dd>
</dl>
_typeplate.scss
@mixin definition-list-style($style) {
	// lining style
	@if $style == lining {
		dt, dd {
			display: inline;
			margin: 0;
		}
		dt, dd {
			& + dt {
				&:before {
					content: "\A";
					white-space: pre;
				}
			}
		}
		dd {
			& + dd {
				&:before {
					content: ", ";
				}
			}
			&:before {
					content: ": ";
					margin-left: -0.2rem; // removes extra space between the dt and the colon
			}
		}
	}
}

dl {
		@include definition-list-style(lining);
}

c) Dictionary-style Definition

The third format for definition lists is dictionary. This style is more a formal, applying proper punctuation where necessary and includes ordinal indicators:

This is a term
this is the definition of that term, which both live in a dl.
Another Term
And it gets a definition too, which is this line
this is a 2nd definition for a single term.
Term
Other Defined Term
dt terms may stand on their own without an accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.
HTML
<dl class="dictionary-style">
	<dt><b></b></dt>
		<dd></dd>
	<dt><b></b></dt>
		<dd></dd>
		<dd></dd>
	<dt><b></b></dt>
		<dd></dd>
</dl>
_typeplate.scss
@mixin definition-list-style($style) {
	// dictionary-style
	@if $style == dictionary-style {
		dt {
			display: inline;
			counter-reset: definitions;
			& + dt {
				&:before {
					content: ", ";
					margin-left: -0.2rem; /* removes extra space between the dt and the comma */
				}
			}
		}
		dd {
			display: block;
			counter-increment: definitions;
			&:before {
				content: counter(definitions, decimal) ". ";
			}
		}
	}
}

dl {
	@include definition-list-style(dictionary-style);
}
↑ back to top