• <ul class="list decimal">
  • Quisque faucibus cursus
    • <ul class="list alpha">
    • Quisque faucibus cursus
      • <ul class="list roman">
      • Quisque faucibus cursus
      • Integer eget nisi dolor
        • <ul class="list none">
        • Quisque faucibus cursus
        • Integer eget nisi dolor
        • Sed consectetur neque
      • Sed consectetur neque
    • Integer eget nisi dolor
    • Sed consectetur neque
  • Integer eget nisi dolor
  • Sed consectetur neque

Notes:

All of the CSS classes that are used for the unordered lists found on this page can also be used for ordered lists and the same result will be achieved.

The "default list" above (the first list on this page) is our modified version, if you were to add a list without CSS it would look similar to our default version, difference being, our version has more space between the list elements making it look cleaner and the content is easier to read.

The example to the left simply shows what is possible when using the lists from above, when nested within each other.

The nested list (right) has its own CSS class "block", each nested child list has its own left border which helps to associate the list elements with their direct parent.

  • Nullam congue odio
  • Quisque faucibus cursus
    • Nullam congue odio
    • Quisque faucibus cursus
      • Nullam congue odio
      • Quisque faucibus cursus
      • Integer eget nisi dolor
        • Nullam congue odio
        • Quisque faucibus cursus
        • Integer eget nisi dolor
        • Sed consectetur neque
      • Sed consectetur neque
    • Integer eget nisi dolor
    • Sed consectetur neque
  • Integer eget nisi dolor
  • <ul class="list block">