Документация UIkit 3 на русском

Главная
Карточка

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

Как использовать компонент 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>

Заголовок

Станислав Лем, 2018

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

Ссылка

<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. Практическое применение карточек.

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

Новинка
Телевизор Panasonic TX-43FR250

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

6 999 р

100 шт. в наличии
Подробнее
Новинка
Смартфон SAMSUNG Galaxy A7

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

21 999 р

100 шт. в наличии
Подробнее
Новинка
17.3" Ноутбук HP OMEN

17-an118ur, черный

120 000 р

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 черный

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>

Документация

Карточка

Default

Default

Primary

Secondary

Hover

Default

Primary

Secondary

Small

Large

Заголовок

Media Top

Media Bottom

Media Left

Media Right

Заголовок

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

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

Смартфон SAMSUNG Galaxy A7

17.3" Ноутбук HP OMEN

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

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

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

Уважаемые пользователи!