# 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
  1. Criminal Law
  2. Family and Gender / Sexuality Law
  3. International Law
Example Markup

  <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
Example Markup

  <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
Example Markup

  <ul class="block">
    <li>Criminal Law</li>
    <li>Family and Gender / Sexuality Law</li>
    <li>International Law</li>
  </ul>

  <ul class="block striped">
    ...
  </ul>