Блок

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

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

Для установки этого компонента, просто добавьте .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>