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.
dl
.dt
may be followed by multiple dd
s.<dl>
<dt><b></b></dt>
<dd></dd>
</dl>
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:
dl
.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
.<dl class="lining">
<dt><b></b></dt>
<dd></dd>
</dl>
@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);
}
The third format for definition lists is dictionary. This style is more a formal, applying proper punctuation where necessary and includes ordinal indicators:
dl
.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
.<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>
@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);
}