materialize-css/jade/page-contents/badges_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <!--  Badges Section  -->
      <div id="collections" class="section scrollspy">

        <div class="row">
          <div class="col s12">
            <p class="caption">Badges can notify you that there are new or unread messages or notifications. Add the <code class="language-markup">new</code> class to the badge to give it the background.</p>

            <h2 class="header">Collections</h2>

            <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</span></a>
              <a href="#!" class="collection-item">Alan</a>
              <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
            </div>
            <pre><code class="language-markup">
  &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&lt;/span>&lt;/a>
    &lt;a href="#!" class="collection-item">Alan&lt;/a>
    &lt;a href="#!" class="collection-item">Alan&lt;span class="badge">14&lt;/span>&lt;/a>
  &lt;/div>
            </code></pre>
          </div>
        </div>
      </div>

      <div id="dropdown" class="section scrollspy">
        <div class="row">
          <div class="col s12">

            <h2 class="header">Badges in Dropdown</h2>

            <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</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>

            <pre><code class="language-markup">
  &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&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>
            </code></pre>

          </div>
        </div>
      </div>

      <div id="navbar" class="section scrollspy">
        <div class="row">
          <div class="col s12">

            <h2 class="header">Badges in Navbar</h2>

           <nav>
             <div class="nav-wrapper">
               <a href="" class="brand-logo">Logo</a>
               <ul id="nav-mobile" class="right hide-on-med-and-down">
                 <li><a href="">sass</a></li>
                 <li><a href="">sass <span class="new badge">4</span></a></li>
                 <li><a href="">sass</a></li>
               </ul>
             </div>
           </nav>
           <br>

            <pre><code class="language-markup">
&lt;nav>
  &lt;div class="nav-wrapper">
    &lt;a href="" class="brand-logo">Logo&lt;/a>
    &lt;ul id="nav-mobile" class="right hide-on-med-and-down">
      &lt;li>&lt;a href="">sass&lt;/a>&lt;/li>
      &lt;li>&lt;a href="">sass &lt;span class="new badge">4&lt;/span>&lt;/a>&lt;/li>
      &lt;li>&lt;a href="">sass&lt;/a>&lt;/li>
    &lt;/ul>
  &lt;/div>
&lt;/nav></code></pre>

          </div>
        </div>
      </div>

      <div id="options" class="section scrollspy">

        <div class="row">
          <div class="col s12">
            <h2 class="header">Options</h2>
            <p class="caption">You can customize captions in many ways.</p>
          </div>
        </div>

        <div class="row">
          <div class="col s12 m3"><h5 class="light">Custom Caption</h5></div>
          <div class="col s12 m9">
            <div class="collection">
              <a href="#!" class="collection-item">Custom Badge Captions<span class="new badge" data-badge-caption="custom caption">4</span></a>
              <a href="#!" class="collection-item">Custom Badge Captions<span class="badge" data-badge-caption="custom caption">4</span></a>
            </div>
          </div>
          <div class="col s12 m9 offset-m3">
            <p>You can explicitly set the caption in a badge using the <code class="language-markup">data-badge-caption</code> attribute.</p>
            <pre><code class="language-markup">
  &lt;span class="new badge" data-badge-caption="custom caption">4&lt;/span>
  &lt;span class="badge" data-badge-caption="custom caption">4&lt;/span>
            </code></pre>
          </div>
        </div>

        <div class="row">
          <div class="col s12 m3"><h5 class="light">Colors</h5></div>
          <div class="col s12 m9">
            <div class="collection">
              <a href="#!" class="collection-item">Red<span class="new badge red" data-badge-caption="red">4</span></a>
              <a href="#!" class="collection-item">Blue<span class="new badge blue" data-badge-caption="blue">4</span></a>
            </div>
          </div>
          <div class="col s12 m9 offset-m3">
            <p>You can use our color classes to set the background-color of the badge.</p>
            <pre><code class="language-markup">
  &lt;span class="new badge red">4&lt;/span>
  &lt;span class="new badge blue">4&lt;/span>
            </code></pre>
          </div>
        </div>

      </div>
      <!-- End badges -->


    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#collections">Collections</a></li>
            <li><a href="#dropdown">Dropdown</a></li>
            <li><a href="#navbar">Navbar</a></li>
            <li><a href="#options">Options</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>