Бейдж

Быстро и легко создавать красивые значки уведомлений.

Как использовать компонент Badge в UIkit 3

Просто задайте класс .uk-badge для любого инлайнового элемента, например <a> или <span>.

<span class="uk-badge"></span>
  • 1 100
  • <span class="uk-badge">1</span>
<span class="uk-badge">100</span>

Бедж в карточках. Комбинирование с эмблемами

Модульность UIkit 3 позволяет комбинировать различные компоненты. Например, привычные карточки товаров можно украсить стикерами путем сочетания лэйбла и обложки.

Для начала создается простая разметка:

<div class="uk-card-badge uk-label">Новинка</div>
<div class="uk-card-badge uk-label uk-label-success">Новинка</div>
<div class="uk-card-badge uk-label uk-label-warning">Новинка</div>
<div class="uk-card-badge uk-label uk-label-danger">Новинка</div>

Выбранный код помещается в тело карточки. Для наглядности создадим 4 варианта и поместим их внутри трехколоночной сетки.

  • UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

    UIkit cards
    Новинка

    Телевизор Panasonic TX-43FR250

    20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный

    6 999 р

    100 шт. в наличии

  • <div data-uk-grid="" class="uk-grid uk-child-width-1-3@m">
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg"
     data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" data-uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" data-uk-grid="">
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" data-uk-icon="icon: heart"></a></li>
    <li><a href="#" data-uk-icon="icon: comment"></a></li>
    <li><a href="#" data-uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>

    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg"
     data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" data-uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label uk-label-success">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" data-uk-grid="">
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" data-uk-icon="icon: heart"></a></li>
    <li><a href="#" data-uk-icon="icon: comment"></a></li>
    <li><a href="#" data-uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>

    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg"
     data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" data-uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label uk-label-warning">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" data-uk-grid="">
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" data-uk-icon="icon: heart"></a></li>
    <li><a href="#" data-uk-icon="icon: comment"></a></li>
    <li><a href="#" data-uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <div class="uk-text-center">
    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
    <img class="uk-transition-scale-up uk-transition-opaque" data-src="/images/light-s.jpg"
     data-width="1000" data-height="667" alt="UIkit cards" uk-img="">
    <div class="uk-position-center">
    <span class="uk-transition-fade" data-uk-icon="icon: plus; ratio: 2"></span>
    </div>
    </div>
    </div>
    <div class="uk-card-badge uk-label uk-label-danger">Новинка</div>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Телевизор Panasonic TX-43FR250</h3>
    <p class="uk-text-truncate">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
    <div class="uk-child-width-auto uk-flex-middle" data-uk-grid="">
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large">6 999 р</span>
    </div>
    <div>
    <ul class="uk-iconnav uk-flex-right">
    <li><a href="#" data-uk-icon="icon: heart"></a></li>
    <li><a href="#" data-uk-icon="icon: comment"></a></li>
    <li><a href="#" data-uk-icon="icon: star"></a></li>
    </ul>
    </div>
    </div>
    <p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
    </div>
    </div>
    </div>
    </div>

Внимание Используется разметка из раздела примеры разметки UIkit.