Карточка

Создавайте карточки с контентом в различных вариантах оформления.

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

Компонент Карточки состоит из самой карточки, тела карточки и необязательного заголовка. Карточки можно располагать в столбцах сетки из компонента Grid.

Примеры использование карточек в реальной жизни смотрите в разделе Примеры разметки UIkit.

Класс Описание
.uk-card Добавьте этот класс к элементу <div> для начала работы с компонентом.
.uk-card-body Добавьте этот класс, чтобы создать поля содержимого.
.uk-card-title Добавьте этот класс, чтобы стилизовать заголовок карточки.
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

По умолчанию карточка не иммет оформления. Поэтому важно добавить класс-модификатор для стилизации. в этом примере мы используем стиль по умолчанию — .uk-card-default.

  • Default

    Мой компьютер, должно быть, неисправен: каждый раз, когда я задаю ему неверный вопрос, он выдает мне неверный ответ.

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
        <h3 class="uk-card-title">Default</h3>
        <p>Мой <a href="#">компьютер</a>, должно быть, неисправен: каждый раз, когда я задаю ему неверный вопрос, он выдает мне неверный ответ.</p>
    </div>

Модификаторы стилей

В UIkit 3 имеются следующие варианты стилей для компонента Карточки:

Класс Описание
.uk-card-default Добавьте этот класс, чтобы создать визуально оформленный блок.
.uk-card-primary Добавьте этот класс, чтобы использовать основной цвет стилизации.
.uk-card-secondary Добавьте этот класс, чтобы использовать дополнительный цвет стилизации.
<div class="uk-card uk-card-default"></div>

<div class="uk-card uk-card-primary"></div>

<div class="uk-card uk-card-secondary"></div>
  • Default

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

    Primary

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

    Secondary

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

  • <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Default</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-primary uk-card-body">
                <h3 class="uk-card-title">Primary</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-secondary uk-card-body">
                <h3 class="uk-card-title">Secondary</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
    </div>

Модификатор наведения

Чтобы создать эффект наведения на карточку, добавьте класс .uk-card-hover. Это удобно при работе с якорями и может сочетаться с другими модификаторами карточек.

<div class="uk-card uk-card-hover"></div>
  • Hover

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

    Default

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

    Primary

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

    Secondary

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

  • <div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
        <div>
            <div class="uk-card uk-card-hover uk-card-body">
                <h3 class="uk-card-title">Hover</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                <h3 class="uk-card-title">Default</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light">
                <h3 class="uk-card-title">Primary</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-light">
                <h3 class="uk-card-title">Secondary</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
    </div>

Модификаторы размеров

Перечисленные модификаторы задают большие или маленькие поля контента:

Класс Описание
.uk-card-small Уменьшает размер полей карточки
.uk-card-large Увеличивает размер полей карточки.
<div class="uk-card uk-card-small uk-card-default"></div>

<div class="uk-card uk-card-large uk-card-default"></div>
  • Small

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

    Large

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

  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-small uk-card-body">
                <h3 class="uk-card-title">Small</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-body">
                <h3 class="uk-card-title">Large</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
    </div>

Шапка и подвал карточки

Вы также можете добавить карточке верхний и нижний колонтитулы. Добавьте .uk-card-header или .uk-card-footer к элементу <div> внутри карточки.

<div class="uk-card">
    <div class="uk-card-header">
        <h3 class="uk-card-title"></h3>
    </div>
    <div class="uk-card-body"></div>
    <div class="uk-card-footer"></div>
</div>
  • Заголовок

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

  • <div class="uk-card uk-card-default uk-width-1-2@m">
        <div class="uk-card-header">
            <div class="uk-grid-small uk-flex-middle" uk-grid>
                <div class="uk-width-auto">
                    <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg">
                </div>
                <div class="uk-width-expand">
                    <h3 class="uk-card-title uk-margin-remove-bottom">Заголовок</h3>
                    <p class="uk-text-meta uk-margin-remove-top"><time datetime="2018-04-01T19:00">Станислав Лем, 2018</time></p>
                </div>
            </div>
        </div>
        <div class="uk-card-body">
            <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
        </div>
        <div class="uk-card-footer">
            <a href="#" class="uk-button uk-button-text">Ссылка</a>
        </div>
    </div>

Медиа контент

Чтобы отобразить изображение внутри карточки без пробелов, добавьте один из следующих классов к элементу <div>, в котором лежит элемент <img>. Создайте разметку как в примере ниже.

Класс Описание
.uk-card-media-top Выравнивает медиа контент по верхнему краю.
.uk-card-media-bottom Выравнивает медиа контент по нижнему краю.
.uk-card-media-left Выравнивает медиа контент по левому краю.
.uk-card-media-right Выравнивает медиа контент по правому краю.
<div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
        <img src="" alt="">
    </div>
    <div class="uk-card-body"></div>
</div>
  • Media Top

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

    Media Bottom

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

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-card uk-card-default">
                <div class="uk-card-media-top">
                    <img src="images/light.jpg" alt="">
                </div>
                <div class="uk-card-body">
                    <h3 class="uk-card-title">Media Top</h3>
                    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default">
                <div class="uk-card-body">
                    <h3 class="uk-card-title">Media Bottom</h3>
                    <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
                </div>
                <div class="uk-card-media-bottom">
                    <img src="images/light.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

Горизонтальное выравнивание

Классы .uk-card-media-left и .uk-card-media-right используются для удаления скругленных углов или других стелей, где это необходимо. Они не создают других стилей.

Добавьте класс .uk-cover-container из компонента Обложка. Добавьте атрибут uk-cover к изображению и используйте возможности компонентов Сетка и Ширина чтобы применить различные варианты выравнивания. Создайте элемент <canvas> с шириной и высотой вашего изображения, чтобы он сохранял свои размеры при изменении размера экрана. Это один из примеров адавтивности карточек в сетке.

<div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="" alt="" uk-cover>
        <canvas width="" height=""></canvas>
    </div>
    <div>
        <div class="uk-card-body"></div>
    </div>
</div>
  • Media Left

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

    Media Right

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

  • <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
        <div class="uk-card-media-left uk-cover-container">
            <img src="images/light.jpg" alt="" uk-cover>
            <canvas width="600" height="400"></canvas>
        </div>
        <div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Left</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
    </div>
    
    <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
        <div class="uk-flex-last@s uk-card-media-right uk-cover-container">
            <img src="images/light.jpg" alt="" uk-cover>
            <canvas width="600" height="400"></canvas>
        </div>
        <div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Right</h3>
                <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
            </div>
        </div>
    </div>

Бейдж

Чтобы разместить бейдж внутри карточки, добавьте класс .uk-card-badge к элементу контейнера. Чтобы стилизовать бейджик, вы можете использовать один из других компонентов, например, Эмблемы.

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>
  • Бейдж

    Заголовок

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

  • <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
        <div class="uk-card-badge uk-label">Бейдж</div>
        <h3 class="uk-card-title">Заголовок</h3>
        <p>Системы неслыханно быстрые ошибаются неслыханно быстро.</p>
    </div>

UIKit 3 Card. Практическое применение карточек.

Для создание карточек товара интернет-магазина используем компоненты Сетка и Карточка.

  • 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>