List groups

This a list group component:

<div class="list-group">
  <div>Item</div>
  <div class="primary">Item</div>
  <div class="secondary">Item</div>
  <div class="tertiary">Item</div>
  <div class="success">Item</div>
  <div class="danger">Item</div>
  <div class="warning" >Item</div>
  <div class="info">Item</div>
</div>

Primary list group:

<div class="primary list-group">
  <div>Item</div>
  <div>Item</div>
</div>

Link list group:

<nav class="list-group">
  <a href="#" class="canvas">Item</a>
  <a href="#" class="primary">Item</a>
  <a href="#" class="secondary">Item</a>
  <a href="#" class="tertiary">Item</a>
  <a href="#" class="success">Item</a>
  <a href="#" class="danger">Item</a>
  <a href="#" class="warning" >Item</a>
  <a href="#" class="info">Item</a>
</nav>

You can add this class to a ul as well.

<ul class="list-group">
  <li>Item</li>
  <li>Item</li>
</ul>

Clickable class

You can make elements look clickable by adding clickable class to list-group.

<ul class="clickable list-group">
  <li>Item</li>
  <li>Item</li>
</ul>