<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
/>
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"text/javascript"
</
script
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
</
head
>
<
body
>
<
h3
>Badges in collections</
h3
>
<
div
class
=
"collection"
>
<
a
href
=
"#!"
class
=
"collection-item green-text"
>
<
span
class
=
"badge green-text"
>1</
span
>Message</
a
>
<
a
href
=
"#!"
class
=
"collection-item green-text"
>
<
span
class
=
"new badge green"
>4</
span
>Message</
a
>
<
a
href
=
"#!"
class
=
"collection-item green-text"
>Message</
a
>
<
a
href
=
"#!"
class
=
"collection-item green-text"
>
<
span
class
=
"badge green-text"
>10</
span
>Message</
a
>
</
div
>
<
h3
>Badges in dropdowns</
h3
>
<
ul
id
=
"dropdown"
class
=
"dropdown-content"
>
<
li
>
<
a
href
=
"#"
class
=
"green-text"
>Inbox
<
span
class
=
"badge green-text"
>22</
span
></
a
>
</
li
>
<
li
>
<
a
href
=
"#!"
class
=
"green-text"
>Unread
<
span
class
=
"new badge green"
>14</
span
></
a
>
</
li
>
<
li
><
a
href
=
"#"
class
=
"green-text"
>Sent</
a
></
li
>
<
li
>
<
a
href
=
"#"
class
=
"green-text"
>Outbox
<
span
class
=
"badge green-text"
>10</
span
></
a
>
</
li
>
</
ul
>
<
a
class
=
"btn dropdown-button green"
href
=
"#"
data-activates
=
"dropdown"
> Dropdown
<
i
class
=
"mdi-navigation-arrow-drop-down right"
></
i
></
a
>
<
div
>
<
h3
>Badges in Navbar</
h3
>
<
nav
>
<
div
class
=
"nav-wrapper green"
>
<
a
href
=
""
class
=
"brand-logo"
>Navbar</
a
>
<
ul
id
=
"nav-mobile"
class
=
"right hide-on-med-and-down"
>
<
li
><
a
href
=
""
>menu1</
a
></
li
>
<
li
>
<
a
href
=
""
>menu2
<
span
class
=
"new badge"
>4</
span
></
a
>
</
li
>
<
li
><
a
href
=
""
>menu3</
a
></
li
>
</
ul
>
</
div
>
</
nav
>
</
div
>
<
div
>
<
h3
>Badges in Collapsible</
h3
>
<
ul
class
=
"collapsible"
>
<
li
>
<
div
class
=
"collapsible-header"
>
<
i
class
=
"material-icons"
>add</
i
>
First
<
span
class
=
"new badge green"
>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"
>arrow_forward</
i
>
Second
<
span
class
=
"badge green-text"
>1</
span
>
</
div
>
<
div
class
=
"collapsible-body"
>
<
p
>Lorem ipsum dolor sit amet.</
p
>
</
div
>
</
li
>
</
ul
>
</
div
>
<
script
src
=
</
script
>
</
body
>
</
html
>