Badge

Badge

Easlily create nicely looking badges to label and highlight your content.

Usage

To create a badge, just add the .uk-badge class to a <div> or <span> element.

Example

Info New Free

Markup

<div class="uk-badge">...</div>

Modifiers

To display badges in a different style, just add modifier classes to the .uk-badge class. These modifiers can be combined with each other.

Notification

Add the .uk-badge-notification class to indicate a notification, typically it is used with numbers.

Example

1 2 3 10 100

Markup

<div class="uk-badge uk-badge-notification">...</div>

Color Modifier

Add the .uk-badge-success, .uk-badge-warning or .uk-badge-danger class for additional colors.

Example

Success Warning Danger

1 10 1 10 1 10

Markup

<div class="uk-badge uk-badge-success">...</div>
<div class="uk-badge uk-badge-warning">...</div>
<div class="uk-badge uk-badge-danger">...</div>

Lorem ipsum dolor sit amet, posse appareat usu id, sit inermis pertinacia ei, doctus nusquam ex eum. Ex tota
legendos principes vim, sit at amet nemore doctus.Adolescens honestatis eos ne!


(07) 551 234 56

1234/56 Lorem i Consectetur, QLD 4000

your_fitness@lorem.com