Карточки. Практическое применение

Компонент Карточки пришел на смену панелей, которые использовались в UIkit 2. Рассмотрим варианты использования нового компонента на примере блога и интернет-магазина.

Использование карточек для создания макета блога.

Во многих шаблонах CMS можно встретить разметку, в которой сетка создается построчно, в конце каждой строки для очистки потока вставляется .clearfix. Сейчас этого делать не нужно. Мы просто добавляем в сетку нужное количество блоков и назначам родительскому элементу класс .uk-child-width-1-3@m, чтобы отображать 3 колонки с разрешения 960px.

Разметка

<div class="uk-child-width-1-3@m" uk-height-match=".uk-card-body" ui-grid>
<div></div>
<div></div>
<div></div>
</div>

Теперь добавим карточку в нашу сетку

  • UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка 
  • <div class="uk-child-width-1-3@m" uk-grid>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    </div>

Разное число контента

Сетка будет выглядеть хорошо, если количество текста будет одинаковым. Так бывает далеко не всегда, поэтому вполне вероятна подобная ситуация:

UIkit cards

Заголовок

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

Ссылка
UIkit cards

Заголовок

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Ссылка
UIkit cards

Заголовок

Системы неслыханно быстрые ошибаются неслыханно быстро.

Ссылка
UIkit cards

Заголовок

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

Ссылка
UIkit cards

Заголовок

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Ссылка
UIkit cards

Заголовок

Системы неслыханно быстрые ошибаются неслыханно быстро.

Ссылка

Вы можете использовать два популярных подхода: использовать Masonry или применить сравнение высоты из компонента Высота. Рассмотрим оба примера подробнее.

Сопоставление высоты

Добавим к родительскому атрибут uk-height-match=".uk-card-body" и посмотрим, что получилось.

<div class="uk-child-width-1-3@m" uk-height-match=".uk-card-body" ui-grid>
<div></div>
<div></div>
<div></div>
</div>
UIkit cards

Заголовок

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

Ссылка
UIkit cards

Заголовок

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Ссылка
UIkit cards

Заголовок

Системы неслыханно быстрые ошибаются неслыханно быстро.

Ссылка
UIkit cards

Заголовок

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

Ссылка
UIkit cards

Заголовок

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Ссылка
UIkit cards

Заголовок

Системы неслыханно быстрые ошибаются неслыханно быстро.

Ссылка

Что изменилось? Мы использовали атрибут uk-height-match, функционал которого направили на сопоставление высоты элементов с классом .uk-card-body. UIkit нашел все элементы с указанным классом, определил самый высокий из них и задал свойство CSS min-height всем элементам в наборе. Обратите внимание, что мы проставили минимальную высоту определенным элементам, ничего больше не изменилось.

Злоупотреблять данной практикой не стоит, рекомендуется вставлять примерно равное количество текста в ваши карточки, чтобы не портить внешний вид.

Masonry

В современном веб-дизайне появилась методика представления содержимого в виде "кирпичной кладки" — Masonry. Это выглядит довольно эффектно. В UIkit 3 имеется такой функционал.

Возьмем разметку из примеров выше и добавим атрибут uk-grid опцию "masonry: true". В итоге у нас получится так: uk-grid="masonry: true"

<div class="uk-child-width-1-3@m"  uk-grid="masonry: true">
<div></div>
<div></div>
<div></div>
</div>
UIkit cards

Заголовок

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

Ссылка
UIkit cards

Заголовок

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Ссылка
UIkit cards

Заголовок

Системы неслыханно быстрые ошибаются неслыханно быстро.

Ссылка
UIkit cards

Заголовок

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

Ссылка
UIkit cards

Заголовок

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Ссылка
UIkit cards

Заголовок

Системы неслыханно быстрые ошибаются неслыханно быстро.

Ссылка

В новом варианте сетки UIkit 3 функциональность Masonry изменилась. В данный момент при раскладке ячеек сетки используется transform, а не абсолютное позиционирование.

Вид вашего блога можно разнообразить, если добавить эффект параллакса. Добавим в атрибут uk-grid еще одно значение, чтобы получилось uk-grid="masonry: true; parallax: 150". После этого центральная часть будет иметь скорость передвижения отличную, от соседних.

  • UIkit cards

    Заголовок

    Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

    Ссылка
    UIkit cards

    Заголовок

    Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка
    UIkit cards

    Заголовок

    Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.

    Ссылка
    UIkit cards

    Заголовок

    Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

    Ссылка
    UIkit cards

    Заголовок

    Системы неслыханно быстрые ошибаются неслыханно быстро.

    Ссылка 
  • <div class="uk-child-width-1-3@m" uk-grid="masonry: true; parallax: 150">
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
    <img data-src="/images/light-s.jpg" data-width="1000" data-height="667" alt="UIkit cards" uk-img>
    </div>
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>

    </div>
    <div class="uk-card-footer">
    <a class="uk-button uk-button-default " href="#">Ссылка</a>
    </div>
    </div>
    </div>
    </div>

Использование карточек для создания макета интернет-магазина.

Одинаковые карточки товаров в интернет-магазинах являются настоящей головной болью для верстальщиков. К счастью, UIkit 3 поможет нам в решении проблем, связанных версткой каталогов.

Создадим простейшую карточку товара, содержащую название товара, бейджик, изображение товара, краткое описание, цену и кнопку корзины. Используя опыт, полученный из примеров выше, выставим одинаковую высоту блоку с контентом с помощью атрибута uk-height-match=".uk-card-body"

Разметка карточки

<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">Телевизор Panasonic TX-43FR250</h3>
<p class="uk-text-truncate">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">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>

Создаем сетку и вставляем в нее наши карточки. Смотрим на результат.

  • UIkit cards
    Новинка

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

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

    6 999 р

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

    Подробнее
    UIkit cards
    Новинка

    Смартфон SAMSUNG Galaxy A7

    (2018) 64GB Black (SM-A750FN/DS)

    21 999 р

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

    Подробнее
    UIkit cards
    Новинка

    17.3" Ноутбук HP OMEN

    17-an118ur, черный

    120 000 р

    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 class="uk-child-width-1-2@m uk-child-width-1-3@l" uk-height-match=".uk-card-body" uk-grid>
    <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" 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" 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="#" 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>
    </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" 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">Смартфон SAMSUNG Galaxy A7</h3>
    <p class="uk-text-truncate">(2018) 64GB Black (SM-A750FN/DS)</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large">21 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>
    </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" 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">17.3" Ноутбук HP OMEN</h3>
    <p class="uk-text-truncate">17-an118ur, черный</p>
    <div class="uk-child-width-auto uk-flex-middle" uk-grid>
    <div>
    <span class="uk-text-emphasis uk-text-bold uk-text-large">120 000 р</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>
    </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" 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" 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="#" 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>
    </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" 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" 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="#" 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>
    </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" 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" 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="#" 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>
    </div>
    </div>

После выполнения этих действий остается несколько штрихов: разобраться с заголовками, текстами описания, размерами на различных разрешениях.