Блок

Разделяйте целые разделы с контентом, объединяя их в стилизованные блоки. Используйте компонент Block, как родительский контейнер, к которому можно применить фон и необходимые отступы.

Применение

Добавьте класс .uk-block элементу, чтобы применить компонент UIkit 2.

Пример

Раздел с контентом

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах.

Разметка

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

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

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

Класс	Описание
`.uk-block-default`	Добавляет цвет фона по умолчанию, обычно белый.
`.uk-block-primary`	Добавляет основной цвет фона.
`.uk-block-muted`	Добавляет светлый цвет фона.
`.uk-block-secondary`	Добавляет тёмный цвет фона.

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

Пример

Block primary + Block primary + Сontrast

Разметка

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

Пример

Block muted

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

Разметка

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

Отступы

Добавьте класс .uk-block-large, чтобы добавить большой отступ к вашему блоку с контентом. Если понадобится, можно удалить отступы у блока используя один классов .uk-padding-* из компонента UIkit 2 - Utility.

Пример

Block secondary + Block large + Сontrast

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

Разметка

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

* Дополнительно...

<div class="uk-block uk-block-primary uk-block-large uk-contrast">
    <div class="uk-container">

        <h3>Заголовок</h3>

        <div class="uk-grid uk-grid-match" data-uk-grid-margin>
            <div class="uk-width-1-2">
                <div class="uk-panel">
                    <p>Душа моя озарена неземной радостью... </p>
                </div>
            </div>
            <div class="uk-width-1-2">
                <div class="uk-panel">
                    <p>Душа моя озарена неземной радостью... </p>
                </div>
            </div>
        </div>

    </div>
</div>

Заголовок

Душа моя озарена неземной радостью...