Accordion в качестве навигатора по магазинам ТЦ

Компонент Accordion имеет множество вероятных вариантов использования. Как правило, его используют для создания навигационных панелей, но этим ограничиваться не обязательно. В этом примере мы представим список магазинов торгового центра.

Используем простейший аккордеон и добавим в него немного разметки. Для этого создадим список ul и добавим к нему атрибут uk-accordion. Впишем в атрибут пару анимаций — uk-animation-fade для появления и uk-animation-slide-left для исчезновения. Подробнее о вариантах настройки анимаций. Все элементы аккордеона будут схлопнуты — поведение по умолчанию.

Добавим отступы к содержимого аккордеона с помощью классов .uk-section, .uk-section-default и .uk-section-small.

Немного стилизуем заголовки, добавив классы .uk-tile, .uk-tile-mutted и .uk-padding-small прямо к элементу a, чтобы не создавать множество блоков.

Нутри содержимого аккордеона добавим сетку.

Обратите внимание: для установки анимаций появления и исчесзновения используются две опции, которые разделяются запятыми. Если вы хотите использовать одну и ту же анимацию для открытия и закрытия аккордеона, используйте один класс.

    • Продукты питания

      Лента

      Магнит

      Мария-ра

      Пятерочка

      Ярче

      Ашан

      Окей

    • Банкоматы

      Сбербанк

      ВТБ

      Альфа-банк

      Промсвязьбанк

      Райффайзенбанк

      Восточный Банк

      Хоум Кредит

    • Продукты питания

      Лента

      Магнит

      Мария-ра

      Мария-ра

      Мария-ра

      Мария-ра

      Мария-ра

    • Одежда

      Спортмастер

      Adidas

      Nike

      SELA

      Lacoste

      Mango

      PUMA

  • <ul uk-accordion="animation: uk-animation-fade, uk-animation-slide-left">
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Продукты питания</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Лента</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Магнит</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Пятерочка</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Ярче</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Ашан</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Окей</h4>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Банкоматы</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Сбербанк</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>ВТБ</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Альфа-банк</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Промсвязьбанк</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Райффайзенбанк</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Восточный Банк</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Хоум Кредит</h4>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Продукты питания</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Лента</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Магнит</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Одежда</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Спортмастер</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Adidas</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Nike</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>SELA</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Lacoste</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Mango</h4>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>PUMA</h4>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    </ul>

Accordion с динамическими элементами

Добавим нашему аккордеону немного взаимодействия. В блоках с названием магазина раземестим выпадающие панели с краткой информацией о магазине. Для создания выпадающего блока добавим элемент с атрибутом uk-drop во все элементы. Обратите внимание на положение блока в разметке: он идет следом за .uk-tile. Это сделано намеренно, так как в компоненте Drop выпадающий блок появляется при наведении на предыдущий элемент в разметке. Это поведение по умолчанию, которое легко изменить.

По умолчанию выпадающая карточка будет отображаться снизу слева относительно родительского элемента. Если в области просмотра недостаточно места для появления карточки, будет выполнен разворот в верхнюю часть экрана.

  • Наведите

    Заголовок

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

    Ссылка 
  • <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Лента</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>

Объединяем все вместе и смотрим на результат.

    • Продукты питания

      Лента

      Заголовок

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

      Ссылка

      Магнит

      Заголовок

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

      Ссылка

      Мария-ра

      Заголовок

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

      Ссылка

      Пятерочка

      Заголовок

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

      Ссылка

      Ярче

      Заголовок

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

      Ссылка

      Ашан

      Заголовок

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

      Ссылка

      Окей

      Заголовок

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

      Ссылка
    • Банкоматы

      Сбербанк

      Заголовок

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

      Ссылка

      ВТБ

      Заголовок

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

      Ссылка

      Альфа-банк

      Заголовок

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

      Ссылка

      Промсвязьбанк

      Заголовок

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

      Ссылка

      Райффайзенбанк

      Заголовок

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

      Ссылка

      Восточный Банк

      Заголовок

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

      Ссылка

      Хоум Кредит

      Заголовок

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

      Ссылка
    • Продукты питания

      Лента

      Заголовок

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

      Ссылка

      Магнит

      Заголовок

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

      Ссылка

      Мария-ра

      Заголовок

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

      Ссылка

      Пятерочка

      Заголовок

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

      Ссылка

      Ярче

      Заголовок

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

      Ссылка

      Окей

      Заголовок

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

      Ссылка
    • Одежда

      Спортмастер

      Заголовок

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

      Ссылка

      Adidas

      Заголовок

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

      Ссылка

      Nike

      Заголовок

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

      Ссылка

      SELA

      Заголовок

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

      Ссылка

      Lacoste

      Заголовок

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

      Ссылка

      Mango

      Заголовок

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

      Ссылка

      PUMA

      Заголовок

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

      Ссылка 
  • <ul uk-accordion="animation: uk-animation-fade, uk-animation-slide-left">
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Продукты питания</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Лента</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Магнит</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Пятерочка</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Ярче</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Ашан</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Окей</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Банкоматы</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Сбербанк</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>ВТБ</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Альфа-банк</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Промсвязьбанк</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Райффайзенбанк</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Восточный Банк</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Хоум Кредит</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Продукты питания</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Лента</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Магнит</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Мария-ра</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Пятерочка</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Ярче</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Окей</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <a class="uk-accordion-title uk-h4 uk-tile uk-tile-muted uk-padding-small" href="#">Одежда</a>
    <div class="uk-accordion-content">
    <div class="uk-section uk-section-default uk-section-small">
    <div class="uk-child-width-auto uk-grid-small uk-margin" uk-grid>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Спортмастер</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Adidas</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Nike</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>SELA</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Lacoste</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>Mango</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    <div>
    <div class="uk-tile uk-tile-muted">
    <h4>PUMA</h4>
    </div>
    <div uk-drop>
    <div class="uk-card uk-card-default">
    <div class="uk-card-body">
    <h3 class="uk-card-title">Заголовок</h3>
    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>
    <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text">Ссылка</a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </li>
    </ul>