Materialize CSS
  Prev Page
Next Page  
Materialize Badges
Materialize CSS Badges can notify you that there are new or unread messages or notifications. You can add the new, badge classes to the badge to give it the background.
Collections
<div class="collection">
   <a href="#!" class="collection-item"><span class="badge">32</span>HTML5</a>
   <a href="#!" class="collection-item"><span class="new badge">25</span>CSS3</a>
   <a href="#!" class="collection-item">Bootstrap 4</a>
   <a href="#!" class="collection-item"><span class="badge">30</span>Material Design</a>
</div>
Output :
Badges in Dropdown
<ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">HTML5<span class="badge">32</span></a></li>
    <li><a href="#!">CSS3<span class="new badge">19</span></a></li>
    <li><a href="#!">Bootstrap 4</a></li>
    <li><a href="#!">Materialize CSS<span class="new badge">30</span></a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
Output :
Badges in Navbar
<nav>
  <div class="nav-wrapper">
    <a href="" class="brand-logo"> F T L </a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="">HTML5</a></li>
      <li><a href="">CSS3 <span class="new badge">19</span></a></li>
      <li><a href="">Bootstrap 4</a></li>
      <li><a href="">Materialize CSS <span class="new badge">30</span></a></li>
    </ul>
  </div>
</nav>
Output :
navbar
Badges in Collapsibles
<ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">code</i>
      HTML5
      <span class="badge">32</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">computer</i>
      CSS3
      <span class="badge">19</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">dialpad</i>
      Materialize CSS
      <span class="new badge">30</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
</ul>
Output :
Badge Custom Caption
<div class="collection">
    <a href="#!" class="collection-item"><span class="new badge" data-badge-caption="Examples">35</span>HTML5</a>
    <a href="#!" class="collection-item"><span class="new badge" data-badge-caption="Examples">27</span>CSS3</a>
    <a href="#!" class="collection-item"><span class="new badge" data-badge-caption="Examples">54</span>Bootstrap 4</a>
    <a href="#!" class="collection-item"><span class="new badge" data-badge-caption="Examples">40</span>Material Design</a>
</div>
Output :
Badge Colors
<div class="collection">
    <a href="#!" class="collection-item"><span class="new badge green" data-badge-caption="Examples">35</span>HTML5</a>
    <a href="#!" class="collection-item"><span class="new badge blue" data-badge-caption="Examples">27</span>CSS3</a>
    <a href="#!" class="collection-item"><span class="new badge purple" data-badge-caption="Examples">54</span>Bootstrap 4</a>
    <a href="#!" class="collection-item"><span class="new badge red" data-badge-caption="Examples">40</span>Material Design</a>
</div>
Output :
  Prev Page
Next Page