Lists
Lists are vertical groupings of related content. List items begin with either a number(ordered list) or a bullet(unordered list). Lists can be a group of text or links.
# Basic Lists
By default lists use the body font color and can be unordered <ul></ul>
or numbered using an ordered list <ol></ol>
. Each item within the list is known as a list-item or <li></li>
.
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
<ul>
<li>Criminal Law</li>
<li>Family and Gender / Sexuality Law</li>
<li>International Law</li>
</ul>
<ol>
<li>Criminal Law</li>
<li>Family and Gender / Sexuality Law</li>
<li>International Law</li>
</ol>
# Unordered List Bullet Modifiers
In additon to the default black dot unordered lists, you can also choose between 3 other alternate list types to fit your UI needs; .circle
, .caret
and .dash
. You are free to use color modifiers as well; .primary
, .white
and .gray
.
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
<ul class="primary">
<li>Criminal Law</li>
<li>Family and Gender / Sexuality Law</li>
<li>International Law</li>
</ul>
<ul class="cricle primary">
...
</ul>
<ul class="caret primary">
...
</ul>
<ul class="dash primary">
...
</ul>
# Unordered Block Lists
Ocassionally, you may need a none-buletted unordered list. .block
removes the bullets and styles the list like an outlined table. You can alternate the color of each row by adding the .striped
class.
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
- Criminal Law
- Family and Gender / Sexuality Law
- International Law
<ul class="block">
<li>Criminal Law</li>
<li>Family and Gender / Sexuality Law</li>
<li>International Law</li>
</ul>
<ul class="block striped">
...
</ul>