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.
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 size-40" data-badge="1">account_box</div> <!-- Icon badge on icon --> <div class="material-icons mdl-badge mdl-badge--overlap size-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. <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 |