whizark

<h2>list</h2>
<ul class="list">
  <li class="list\item">Item</li>
  <li class="list\item">Item</li>
</ul>

<h2>note-list</h2>
<ul class="note-list">
  <li class="note-list\item">Item</li>
  <li class="note-list\item">Item</li>

whizark

<a class="button">A button</a>
<button class="button">Button button</button>
<a class="button-large">A button</a>
<button class="button-large">Button button</button>

whizark

<div class="container--micro">
  <!-- The style attributes only for the purpose of the demo -->
  <div style="float: left; height: 100px; background: #0f0;">
    content
  </div>
  <div style="float: left; height: 100px; background: #00f;">
    content
  </div>
</div>

whizark

<a class="button">An example link</a>
<a class="button--ghost">An example link</a>

whizark

<a class="button" href="#">&lt;a&gt; button</a>
<button class="button">&lt;button&gt; button</button>