Lists
Basics
The default appearance of lists with no css.
- Item
- Item
- Item
- Item
- Item
- Item
<ol>
<li>Item</li>
</ol>
<ul>
<li>Item</li>
</ul>
A basic .list class will strip browser defaults, add vertical spacing, and position the bullet outside and pad the left edge. Bullets intentionally left off in the next two examples.
- Item
- Item
- Item
- Item
- Item
- Item
<ul class="list">
<li>Item</li>
</ul>
<ol class="list">
<li>Item</li>
</ol>
Add .list_vertical-dense to tighten up the vertical rhythm.
- Item
- Item
- Item
- Item
- Item
- Item
<ul class="list list_vertical-dense">
<li>Item</li>
</ul>
<ol class="list list_vertical-dense">
<li>Item</li>
</ol>
Bullet Styles
All style classes begin with .list_style.
- -disc
- -circle
- -square
- -decimal
- -lower-roman
- -upper-roman
- -lower-alpha
- -upper-alpha
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
- Item
- Item
<ul class="list list_style-disc">
<li>
Item
<ul class="list list_style-circle">
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
</ul>
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
- Item
- Item
<ul class="list list_style-upper-roman">
<li>
Item
<ul class="list list_style-upper-alpha">
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
</ul>