Lists
Definition
A list is a group of words or sentences presented in a sequence. Lists can be ordered—alphabetical or numerical—or unordered and are set off by a character and indented from regular body text. Lists can also be nested.
Usage
Use lists to pair related groups of information and differentiate them from running body text.
Examples
This is an example of an ordered list:
<style type="text/css">body {
font-family: "proxima-nova", sans-serif;
font-size: 18px;
line-height: 1.42857143;
}
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
</style>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
<li>Dates</li>
</ol>
<p>This is an example of an unordered list:</p>
<ul>
<li>Mariam doesn’t like apples.</li>
<li>David loves bananas.</li>
<li>Anya prefers cherries.</li>
<li>Steven has never tasted dates.</li>
</ul>
<p>This is an example of a nested list:</p>
<ol>
<li>Bread</li>
<li>Fruit
<ul>
<li style="">Mariam doesn’t like apples.</li>
<li style="">David loves bananas.</li>
<li style="">Anya prefers cherries.</li>
<li style="">Steven has never tasted dates.</li>
</ul>
</li>
<li>Meat</li>
<li>Vegetables</li>
</ol>
Specifications
Color
The color of lists should match that of running body text.
Padding, Margin, and Line Height
Padding, margins, and line height should match the defaults for running body text. Content managers should also be given the ability to adjust spacing to 1.5x and 2.0x the default line height.