Компонент Карточка

С компонентом «Карточка» («Карта») можно создавать потрясающие макеты с разными стилями и эффектами. Различные модификаторы.

Card: Применение

Создание карты

Компонент UIkit 3 Карточка состоит из самой карты, тела карты и необязательного названия карты. Обычно карты располагаются в столбцах сетки из компонента Грид/Сетка.

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

Пример

В данном примере показана карта без дополнительного "стилевого" класса.

Пустая карточка

Зять в тещином телефоне нашел необычный контакт: "Овощ". Не выдержал. Позвонил. Оказалось - себе...

<div class="uk-card uk-card-body uk-width-1-2@m">
    <h3 class="uk-card-title">Пустая карточка</h3>
    <p>Зять в тещином телефоне нашел необычный контакт: "Овощ". Не выдержал. Позвонил. Оказалось - себе...</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-2@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 class="uk-width-1-1">
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Новая модель организационной деятельности продолжает удивлять.</p>
        </div>
    </div>
</div>

Модификатор «Hover»

Эффект при наведении

Чтобы создать эффект наведения на карту, добавьте класс .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-body uk-card-default"></div>

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

Примеры «карт» с внутренними отступами

Small

Учитывая ключевые сценарии поведения, перспективное планирование предопределяет высокую востребованность системы массового участия.

Изображение для примера

Large

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

<div uk-grid>
    <div class="uk-width-1-2@s">
        <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 class="uk-width-1-2@s">
        <figure class="uk-card uk-card-default uk-card-small uk-card-body uk-card-hover">
            <img src="images/light.webp" width="450" height="300" alt="Изображение для примера" loading="lazy">
        </figure>
    </div>
    <div class="uk-width-1-1">
        <div class="uk-card uk-card-secondary 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">
    <header class="uk-card-header">
        <h3 class="uk-card-title"></h3>
    </header>
    <div class="uk-card-body">
        ...
    </div>
    <footer class="uk-card-footer"></footer>
</div>
Аватарка

Заголовок карты

Надо снять сериал по фильму "Сказка о потерянном времени" и сделать 10 сезонов по 150 серий.

Подробнее 
<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" src="images/ava/avatar-1.webp" width="40" height="40" loading="lazy" alt="Аватарка">
            </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="2019-10-12T19:00">12 Октября, 2019 г.</time>
                </p>
            </div>
        </div>
    </div>
    
    <div class="uk-card-body">
        <p>Надо снять сериал по фильму "Сказка о потерянном времени" и сделать 10 сезонов по 150 серий.</p>
    </div>
    
    <div class="uk-card-footer">
        <a href="#" class="uk-button uk-button-text">Подробнее</a>
    </div>
    
</div>

Media. Без отступов

Добавление изображений без пробелов и отступов

Чтобы отобразить изображение внутри карты без пробелов и отступов, добавьте один из следующих классов в <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="" width="" height="" 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.webp" width="450" height="300" alt="Изображение для примера" loading="lazy">
            </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.webp" width="450" height="300" alt="Изображение для примера" loading="lazy">
            </div>
        </div>
    </div>
</div>

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

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

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

Разметка

<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

Есть 3 вещи, которые человек не сможет сделать никогда в своей жизни: посчитать волосы на голове, помыть глаза с мылом, дышать с высунутым языком.

Изображение для примера

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.webp" alt="Изображение для примера" uk-cover loading="lazy">
        <canvas width="600" height="400"></canvas>
    </div>
    <div>
        <div class="uk-card-body">
            <h3 class="uk-card-title">Media Left</h3>
            <p>Есть 3 вещи, которые человек не сможет сделать никогда в своей жизни: посчитать волосы на голове, помыть глаза с мылом, дышать с высунутым языком.</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.webp" alt="Изображение для примера" uk-cover loading="lazy">
        <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>

Badge

Добавление «значка»

Чтобы разместить значок (Badge) внутри карты, добавьте класс .uk-card-badge в элемент контейнера. Чтобы стилизовать значок с какой-либо информацией другим цветом, вы можете использовать один из других компонентов UIkit 3, например, Метка. 

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>
Значок

Название карты

Только много лет спустя, обзаведясь женой и многочисленным семейством, Робинзон Крузо понял, что прожил 28 лет на Острове свободы.

<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m uk-margin-auto">
    <div class="uk-card-badge">Значок</div>
    <h3 class="uk-card-title">Название карты</h3>
    <p>Только много лет спустя, обзаведясь женой и многочисленным семейством, Робинзон Крузо понял, что прожил 28 лет на Острове свободы.</p>
</div>