Эскиз

Создание различных эскизов, которые бывают различных стилей и размеров.

Использование

Для установки этого компонента, просто добавьте .uk-thumbnail класс к <img>, <a> или <figure> элемент.

Пример

Разметки

<!-- This is an image as a thumbnail -->
<img class="uk-thumbnail" src="" alt="">

<!-- This is an anchor as a thumbnail -->
<a class="uk-thumbnail" href=""><img src="" alt=""></a>

<!-- This is a figure as a thumbnail -->
<figure class="uk-thumbnail"><img src="" alt=""></figure>

Заголовок

Добавить .uk-thumbnail-caption класс <div> элемент, чтобы применить текст подписи под изображением.

Пример

Caption <div>

Caption <a>

Разметки

<!-- This is a div as a thumbnail with a caption -->
<div class="uk-thumbnail">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</div>

<!-- This is an anchor as a thumbnail with a caption -->
<a class="uk-thumbnail" href="">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</a>

<!-- This is a figure as a thumbnail with a caption -->
<figure class="uk-thumbnail">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">...</figcaption>
</figure>

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

Применить .uk-thumbnail-large, .uk-thumbnail-medium, .uk-thumbnail-small или .uk-thumbnail-mini классы для изменения размера изображений. На Базовый компонент необходима, чтобы сделать Изображения aдаптивный по умолчанию.

Пример

.uk-thumbnail-large

.uk-thumbnail-medium

.uk-thumbnail-small

.uk-thumbnail-mini

Разметки

<div class="uk-thumbnail uk-thumbnail-large">...</div>
<div class="uk-thumbnail uk-thumbnail-medium">...</div>
<div class="uk-thumbnail uk-thumbnail-small">...</div>
<div class="uk-thumbnail uk-thumbnail-mini">...</div>

Вы даже можете масштабировать эскиз за его нужного размера, так что она распространяется на всю ширину родительского элемента. Просто добавьте .uk-thumbnail-expand класс.

Пример

.uk-thumbnail-expand

Разметки

<div class="uk-thumbnail uk-thumbnail-expand">...</div>

Грид

Вы можете легко создать грид с эскизами, используя Грид компонент.

Пример

Разметки

<div class="uk-grid">
    <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
    <div class="uk-width-medium-1-2">
        <div class="uk-grid">
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        </div>
    </div>
</div>