<aside class="drawer">
      <ul class="list list-stacked drawer-content">
        <li class="drawer-sub">
          <h5 class="heading list-heading">P0 components</h5>
          <ul class="list list-stacked  drawer-content">
            <li class="list-item"><a href="/pages/components/alert.html">
                <span class="icon">
                  &#9888;
                </span>
                alert</a>
            </li>


            <li class="list-item"><a href="/pages/components/badge.html">
                <span class="icon">
                  &#9313;
                </span>
                badge</a>
            </li>
          </ul>
        </li>

        <li class="drawer-sub">
          <h5 class="heading list-heading">P1 components</h5>
          <ul class="list list-stacked  drawer-content">
            <li class="list-item"><a href="/pages/components/list.html">
                <span class="icon">
                  &#8694;
                </span>
                list</a>
            </li>

            <li class="list-item"><a href="/pages/components/navigation.html">
                <span class="icon">
                  &#11134;
                </span>
                navigation</a>
            </li>



            <li class="list-item"><a href="/pages/components/rating.html">
                <span class="icon">
                  &#9734;
                </span>
                Ratings</a>
            </li>



            <li class="list-item"><a href="/pages/components/text.html">
                <span class="icon">
                  &#9417;
              </span>
                text</a>
            </li>

          </ul>
        </li>
      </ul>
  </aside>