ONLINE LEARNING

Materializecss Badges

New Badges in Materializecss Framework

17 July, 2016

An Materialize badge component is a onscreen notification which can be a number or icon. It is generally used to emphasize the number of items.
New badge have background- property and gives notification about the new things
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.

Start Code from Here:

<!DOCTYPE html>
<html>
<head>
<title>Materializecss Framework</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="container"><!--start with container-->
  <div class="row"><!--start with row-->
    <h1>Badges</h1>
	
	<!--H1 close-->

  <div class="card-panel teal lighten-2">
	<h3>Headings</h3>
     <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>
    </div>
	<!--card-panel teal lighten-2-->
	<div class="card-panel red lighten-2">

	<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>
       </div>   
<!--card-panel red lighten-2-->	   
	   
	   <div class="card-panel red lighten-2"> 
<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 red">4</span></a></li>
      <li><a href="">sass</a></li>
    </ul>
  </div>
</nav> </div> 
  </div><!--close row-->
</div><!--close container-->
<div class="container text-center footer"> 
    <script type="text/javascript" src="http://counter5.statcounterfree.com/private/counter.js?c=496cd2d4adf961f949ed436011a42b5c"></script></div>	  
</body>
</html>