Badge

<div class="badge middle secondary">Premium</div>

Создание элемента

Порядок написания элемента и его модификаторов: badge - название элемента, middle - размер элемента, secondary - цвет элемента, circle/pressed - модификаторы.

Размеры

large - большой
middle - средний
small - маленький

Цвета

primary - синий
success - зеленый
secondary - желтый
danger - красный
caption - серый

Настройки

notice - кружок для нотификаций, размер и цвет зависит от выбранного. Текст и иконки внутри себя.
circle - делает из badge кружок, цвет и размер зависят от того что задали large primary
pressed - заливает badge насыщенным цветом, а текст делает белым. Цвет зависит от указанного primary, success и т.д.
hover - заливает badge менее насыщенным цветом, цвет текста остается стандартным

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

--line - обрезает блок по наполнению

Демонстрация