{{ enablePlugins('prettify') }}
{% set title = "Badges" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}
  
  <div class="card-panel">
    Badges can notify you that there are new or unread messages or notifications. Add the <code>new</code> class to the badge to give it the background.
  </div>


  <!--  Collections  -->
  <div class="card-panel">
    <h4>Collections</h4>
    <div class="row">
      <div class="col l6 s12">
        <div class="collection">
          <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
          <a href="#!" class="collection-item">Alan<span class="new badge">4 new</span></a>
          <a href="#!" class="collection-item">Alan</li>
          <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
        </div>
      </div>
      <div class="col l6 s12">
        <pre class="prettyprint linenums">
&lt;div class="collection">
  &lt;a href="#!" class="collection-item">Alan&lt;span class="badge">1&lt;/span>&lt;/a>
  &lt;a href="#!" class="collection-item">Alan&lt;span class="new badge">4 new&lt;/span>&lt;/a>
  &lt;a href="#!" class="collection-item">Alan&lt;/li>
  &lt;a href="#!" class="collection-item">Alan&lt;span class="badge">14&lt;/span>&lt;/a>
&lt;/div></pre>
      </div>
    </div>
  </div>
  <!--  /Collections  -->


  <!--  Badges in Dropdown  -->
  <div class="card-panel">
    <h4>Badges in Dropdown</h4>
    <div class="row">
      <div class="col l6 s12">
        <ul id="dropdown2" class="dropdown-content">
          <li><a href="#!">one<span class="badge">1</span></a></li>
          <li><a href="#!">two<span class="new badge">1 new</span></a></li>
          <li><a href="#!">three</a></li>
        </ul>
        <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
      </div>
      <div class="col l6 s12">
        <pre class="prettyprint linenums no-margin">
&lt;ul id="dropdown2" class="dropdown-content">
  &lt;li>&lt;a href="#!">one&lt;span class="badge">1&lt;/span>&lt;/a>&lt;/li>
  &lt;li>&lt;a href="#!">two&lt;span class="new badge">1 new&lt;/span>&lt;/a>&lt;/li>
  &lt;li>&lt;a href="#!">three&lt;/a>&lt;/li>
&lt;/ul>
&lt;a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown&lt;i class="mdi-navigation-arrow-drop-down right">&lt;/i>&lt;/a></pre>
      </div>
    </div>
  </div>
  <!--  /Badges in Dropdown  -->
  
{% endblock %}