Блок

Содержание отдельных разделов за счет объединения их в блоки с разными стилями.

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

Для установки этого компонента, просто добавьте .uk-block класс элемента-контейнера.

Пример

Блок

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Разметки

<div class="uk-block">...</div>

Модификаторы

Применить различные цвета фона и отступы, добавьте один из следующих классов. Если два последовательных блоков имеют одинаковый Цвет фона, внутренний отступ автоматически быть разделены.

Класс Описание
.uk-block-default Установка цвета фона по умолчанию, обычно белый или похожие.
.uk-block-muted Добавляет легкий Цвет фона.
.uk-block-primary Добавляет основного цвета фона.
.uk-block-secondary Добавляет другой цвет фона, обычно темного цвета.

Примечание, чтобы правильно отображать цвета, границы и другие элементы на цветные блоки, возможно, вы захотите применить .uk-contrast класс Контраст компонент.

Пример

Первичный

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Разметки

<div class="uk-block uk-block-primary">...</div>

Внутренний отступ

Чтобы увеличить внутренний отступ у блока, просто добавьте .uk-block-large класс. Вы можете также удалить внутренний отступ блока, используя один из .uk-padding-* классов компонента Утилиты.

Пример

Большие

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Разметки

<div class="uk-block uk-block-large">...</div>