Badges

Badges can notify you that there are new or unread messages or notifications. Add the new class to the badge to give it the background.

Collections

1Alan 4Alan Alan 14Alan 
                        
<div class="collection">
    <a href="#!" class="collection-item text-default"><span class="badge text-default">1</span>Alan</a>
    <a href="#!" class="collection-item text-default"><span class="new badge default">4</span>Alan</a>
    <a href="#!" class="collection-item text-default">Alan</a>
    <a href="#!" class="collection-item text-default"><span class="badge text-default">14</span>Alan</a>
</div>

Dropdown

arrow_drop_downDropdown 
                        
<a class="btn dropdown-button default" href="#!" data-activates="badges-dropdown"><i class="material-icons right">arrow_drop_down</i>Dropdown</a>
<ul id="badges-dropdown" class="dropdown-content">
    <li><a href="#!">one<span class="badge">1</span></a></li>
    <li><a href="#!">two<span class="new badge default">1</span></a></li>
    <li><a href="#!">three</a></li>
  </ul>

Navbar

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

Collapsibles

  • 4filter_dramaFirst

    Lorem ipsum dolor sit amet.

  • 1placeSecond

    Lorem ipsum dolor sit amet.

                        
<ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><span class="new badge">4</span><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  <li>
    <div class="collapsible-header"><span class="badge">1</span><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
</ul>