snippet.html

<div class="line local-nav-container">
  <div class="lastUnit size1of1">
    <p class="mobile-top-nav !margin--lv0 full-width font-weight--bold"> <a href="#">Navigation</a> </p>
    <ul class="local-nav selfclear">
      <li><a href="#priority">Priority</a></li>
      <li><a href="#disabled">Disabled</a></li>
      <li><a href="#loading">Loading</a></li>
      <li><a href="#pagination">Pagination</a></li>
      <li><a href="#combo-button">Combo</a></li>
      <li><a href="#group">Group</a></li>
    </ul>
  </div>
</div>


<nav aria-label="Secondary">
  <ul>
    <li><a href="#cat-1">Category 1</a></li>
    <li><a href="#cat-2">Category 2</a></li>
    <li><a href="#cat-3">Category 3</a></li>
    <li><a href="#cat-4">Category 4</a></li>
  </ul>
</nav>



<article id="priority">
  <h3>Priority</h3>
  <p>Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention
    and should be used sparingly.</p>
  <article class="example">
    <h4>Example</h4>
    <button class="button margin-bottom--lv3">Default</button>
    <button class="button p0 margin-bottom--lv3">Important</button>
    <button class="button p1 margin-bottom--lv3">Primary Action</button>
    <button class="button p2 margin-bottom--lv3">Caution</button>
  </article>
  <section>
    [[[ code mirror here ]]]
  </section>
  <article class="notes">
    <p>You can create buttons using the <code>button</code> HTML tag accompanied by the <code>button</code> class.</p>
    <p>To style an anchor <code>(a)</code> tag as a button use the <code>button</code> class.</p>
    <p>To style an <code>input</code> as a button use the <code>button</code> class and define a label by adding a <code>value</code> attribute.</p>
  </article>
</article>