ContextQMD
Back to Materialize

Badges Content

jade/page-contents/badges_content.html

1.0.02.5 KB
Original Source

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

1Alan4AlanAlan14Alan

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

Badges in Dropdown

Dropdown_arrow_drop_down_

<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-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>

Badges in Navbar

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

Badges in Collapsibles

_filter_drama_First4

Lorem ipsum dolor sit amet.

_place_Second1

Lorem ipsum dolor sit amet.

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

Options

You can customize captions in many ways.

Custom Caption

Custom Badge Captions4Custom Badge Captions4

You can explicitly set the caption in a badge using the data-badge-caption attribute.

<span class="new badge" data-badge-caption="custom caption">4</span>
  <span class="badge" data-badge-caption="custom caption">4</span>
Colors

Red4Blue4

You can use our color classes to set the background-color of the badge.

<span class="new badge red">4</span>
  <span class="new badge blue">4</span>