Разбираемся с JavaScript компонентом Фильтр из коробки UIkit 3. Применяем компонента для фильтрации товаров интернет-магазина.
Фильтрация — дело тонкое. Компонент Фильтр является достаточно большим, поэтому изучать его будем маленькими порциями.
Внимание! Данный пример — не призыв к действию. Фильтр подойдет не для всех случаев. Функциональность интернет-магазинов включает большое количество кода, поэтому применение подобной практики нельзя считать хорошей идеей. Мы показываем возможности компонента, но не рекомендуем использовать этот пример для большого количества товаров, т.к. это потребует загрузки всех карточек вместе с картинками, что неминуемо приведет медленной работе страницы. Лучше используйте Ajax.
Начнем с сетки. Создадим две колонки с шириной 25 и 75%. Разметка будет такой:
<div uk-grid>
<div class="uk-width-1-4"></div>
<div class="uk-width-3-4"></div>
</div>
Далее в нашу разметку добавим 2 основных элемента: перключатели фильтра и список элементов фильтра. Стилизуем переключатели с помощью компонента Навигация. Фильтровать будем по параметру цвет и цена — дорого и дешево.
Всю нашу разметку обернем в div
с атрибутом uk-filter
. В атрибут добавим опцию назначения: target: .js-filter"
, где js-filter является списком элементов для фильтрации. Все настройки подробно описаны в
документации.
<div class="uk-card uk-card-default uk-card-body" uk-sticky="top: #my-id; offset: 110">
<span class="uk-nav-header">Цвет</span>
<ul class="uk-nav uk-nav-default">
<li uk-filter-control="filter: [data-color='red']; group: data-color"><a href="#">Красный</a></li>
<li uk-filter-control="filter: [data-color='green']; group: data-color"><a href="#">Зеленый</a></li>
<li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Синий</a></li>
</ul>
<span class="uk-nav-header">Цена</span>
<ul class="uk-nav uk-nav-default">
<li uk-filter-control="filter: [data-price='expensive']; group: price"><a href="#">Дорого</a></li>
<li uk-filter-control="filter: [data-price='cheap']; group: price"><a href="#">Дешево</a></li>
</ul>
</div>
Для удобства использования сделаем блок с переключателями фильтра липким. Он будет прилипать к верхнему краю сетки со сдвигом от верхнего края в 110px.
Не забудем добавить в атрибут uk-sticky
параметр media: @ m
, чтобы отключить липкое поведение на маленьких устройствах.
-
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
99 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
78 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
96 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
96 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
76 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
100 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
7 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
86 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
96 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
1 999 р100 шт. в наличии
-
-
<div uk-filter="target: .js-filter">
<div uk-grid>
<div class="uk-width-1-4" id="filter">
<div class="uk-card uk-card-default uk-card-body" uk-sticky="top: #my-id; offset: 110">
<span class="uk-nav-header">Цвет</span>
<ul class="uk-nav uk-nav-default">
<li uk-filter-control="filter: [data-color='red']; group: data-color"><a href="#">Красный</a></li>
<li uk-filter-control="filter: [data-color='green']; group: data-color"><a href="#">Зеленый</a></li>
<li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Синий</a></li>
</ul>
<span class="uk-nav-header">Цена</span>
<ul class="uk-nav uk-nav-default">
<li uk-filter-control="filter: [data-price='expensive']; group: price"><a href="#">Дорого</a></li>
<li uk-filter-control="filter: [data-price='cheap']; group: price"><a href="#">Дешево</a></li>
</ul>
</div>
</div>
<div class="uk-width-3-4">
<ul class="js-filter uk-child-width-1-2@m" uk-grid>
<li data-color="blue" data-price="expensive">
<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" 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 uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">99 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="cheap">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="cheap">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="green" data-price="expensive">
<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" 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 uk-text-success">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">78 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="blue" data-price="cheap">
<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" 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 uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="expensive">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">96 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="cheap">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="green" data-price="cheap">
<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" 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 uk-text-success">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="green" data-price="expensive">
<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" 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 uk-text-success">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">96 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="cheap">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="blue" data-price="expensive">
<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" 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 uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">76 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="expensive">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">100 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="green" data-price="cheap">
<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" 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 uk-text-success">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-success">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-success">6 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="cheap">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">7 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="blue" data-price="expensive">
<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" 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 uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">86 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="red" data-price="expensive">
<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" 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 uk-text-danger">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-danger">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-danger">96 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
<li data-color="blue" data-price="cheap">
<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" 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 uk-text-primary">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate uk-text-primary">20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный</p>
<div class="uk-child-width-auto uk-flex-middle" uk-grid>
<div>
<span class="uk-text-emphasis uk-text-bold uk-text-large uk-text-primary">1 999 р</span>
</div>
<div>
<ul class="uk-iconnav uk-flex-right">
<li><a href="#" uk-icon="icon: heart"></a></li>
<li><a href="#" uk-icon="icon: comment"></a></li>
<li><a href="#" uk-icon="icon: star"></a></li>
</ul>
</div>
</div>
<p class="uk-text-small uk-text-muted">100 шт. в наличии</p>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between">
<a class="uk-button uk-button-default" href="#">Подробнее</a>
<button class="uk-button uk-button-primary uk-text-right">
<span uk-icon="icon: cart;"></span>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
99 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
78 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
96 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
96 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
76 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
100 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
6 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
7 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
86 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
96 999 р100 шт. в наличии
-
Новинка
Телевизор Panasonic TX-43FR250
20'' (50 см) Телевизор LED Panasonic 20S30HA102B черный
1 999 р100 шт. в наличии