Lists (Bulleted & Expanding)

.list-overstated

Adding .list-overstated to a ul will render the list with bullet icons and bold hyperlinks.

• Use: list-overstated
• Facts
• Government
• History

Source Code:

<ul class="list-overstated"> <li>Use: list-overstated</li> <li><a href="/">Facts</a></li> <li><a href="/">Government</a></li> <li><a href="/">History</a></li> </ul>

.list-understated

Adding .list-understated to a ul will render the list with bullet icons and normal weighted hyperlinks.

• Use: list-understated
• Facts
• Government
• History

Source Code:

<ul class="list-understated"> <li>Use: list-understated</li> <li><a href="/">Facts</a></li> <li><a href="/">Government</a></li> <li><a href="/">History</a></li> </ul>

.list-standout

Adding .list-standout to a ul will render the list with large inward pointing arrows.

• Use:
  list-standout
• Lorem ipsum dolor sit amet
  Nam ultrices vulputate orci id faucibus.
• consectetur adipiscing elit
  Sed eget massa ut nulla sodales ullamcorper nec vel nisi.

Source Code:

<ul class="list-standout"> <li>Use: <br> list-standout</li> <li><a href="/">Lorem ipsum dolor sit amet</a><br> Nam ultrices vulputate orci id faucibus. </li> <li><a href="/">consectetur adipiscing elit</a><br> Sed eget massa ut nulla sodales ullamcorper nec vel nisi. </li> </ul>

List as Accordion

Accordion lists can be toggled open and close by clicking the toggle link. Add id #accordion and class .accordion-list to a ul to create the accordion list. Add .tab to the li tag. Finally, wrap the content to be toggled open and closed in a .panel div. You can use .accordion-list in conjunction with any list style provided.

Note: Accordion List uses HTML5 roles, some ARIA properties, and IDs for accessibility. For best accessibility paractices certain keyboard shortcuts are also implemented.

• Consectetur Fusce Euismod
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
• Pellentesque Justo Nibh Inceptos
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.
• Nullam Nibh Fermentum Vehicula
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.

Source Code:

<ul id="accordion" class="accordion-list list-overstated" role="tablist" multiselectable="true"> <li id="tab1" class="tab" aria-selected="false" aria-controls="panel1" aria-expanded="false" role="tab" tabindex="0"> <a>Consectetur Fusce Euismod</a> </li> <div id="panel1" class="panel" aria-labelledby="tab1" aria-hidden="false" role="tabpanel"> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. </div> <li id="tab2" class="tab" aria-selected="false" aria-controls="panel2" aria-expanded="false" role="tab" tabindex="0"> <a>Pellentesque Justo Nibh Inceptos</a> </li> <div id="panel2" class="panel" aria-labelledby="tab2" aria-hidden="true" role="tabpanel"> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. </div> <li id="tab3" class="tab" aria-selected="false" aria-controls="panel3" aria-expanded="false" role="tab" tabindex="0"> <a>Nullam Nibh Fermentum Vehicula</a> </li> <div id="panel3" class="panel" aria-labelledby="tab3" aria-hidden="true" role="tabpanel"> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. </div> </ul>

Multi-Tiered Ordered Lists

1. This is how top-level ordered list items will appear
   • This is how lower-level unordered list items will appear
     1. This is how your lower-level ordered list items will appear
2. This is how top-level ordered list items will appear
   • This is how lower-level unordered list items will appear
     1. This is how your lower-level ordered list items will appear

Source Code:

<ol> <li>This is how top-level ordered list items will appear <ul> <li>This is how lower-level unordered list items will appear <ol> <li>This is how your lower-level ordered list items will appear</li> </ol> </li> </ul> </li> <li>This is how top-level ordered list items will appear <ul> <li>This is how lower-level unordered list items will appear <ol> <li>This is how your lower-level ordered list items will appear</li> </ol> </li> </ul> </li> </ol>

Multi-Tiered Unordered Lists

• This is how top-level ordered list items will appear
  1. This is how lower-level unordered list items will appear
     • This is how your lower-level ordered list items will appear
• This is how top-level ordered list items will appear
  1. This is how lower-level unordered list items will appear
     • This is how your lower-level ordered list items will appear

Source Code:

<ul> <li>This is how top-level ordered list items will appear <ol> <li>This is how lower-level unordered list items will appear <ul> <li>This is how your lower-level ordered list items will appear</li> </ul> </li> </ol> </li> <li>This is how top-level ordered list items will appear <ol> <li>This is how lower-level unordered list items will appear <ul> <li>This is how your lower-level ordered list items will appear</li> </ul> </li> </ol> </li> </ul>