Badge

Создавайте красивые значки, бейджики, применяйте модификаторы с компонентом Badge.

Применение

Чтобы создать значок, добавьте класс .uk-badge к элементу <div> или <span>. Всё просто!

Пример

Информация Новинка Бесплатно

Разметка

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

Модификаторы

Чтобы отображать значки в другом стиле, добавьте класс-модификатор к классу .uk-badge. Данные модификаторы можно комбинировать друг с другом.

Notification

Добавьте класс .uk-badge-notification, чтобы показать уведомление, часто оно используется с числами.

Примеры

1 3 5 25 100

Уведомление! Невероятно! Примечание

Разметка

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

Модификатор цвета

Добавьте класс .uk-badge-success, .uk-badge-warning или .uk-badge-danger, чтобы применить определенный цвет.

Примеры

Success Warning Danger

Успешно Предупреждение Опасность

Разметка

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

Пример (комби)

1 8 3 13 5 25

Разметка

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