Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Smarty Material Design

power of google material


The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.

You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention.

1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">

NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme.You can create your own material design color:
Click to create your material design color

Credits: MDL official


<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap fs-40" data-badge="1">account_box</div>

<!-- Icon badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap fs-40" data-badge="♥">account_box</div>

<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>

<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>

1. This badge has no background color.
1.  <span class="mdl-badge mdl-badge--no-background" data-badge="123">This badge has no background color.</span>

2.  <a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>

3.  <a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
MDL class Effect Remarks
mdl-badge Defines badge as an MDL component Required on span or link
mdl-badge--no-background Applies open-circle effect to badge Optional
mdl-badge--overlap Make the badge overlap with its container Optional
data-badge="value" Assigns string value to badge Not a class, but a separate attribute; required on span or link