@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "css-badges", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Badges", "crumbs": "
  • Dashboard
  • CSS
  • 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

    Alan1 Alan4 Alan Alan14 
    <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</li>
  <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
</div>

    Badges in Dropdown

    Dropdown 
    <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>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })