Block

Separate content sections by bundling them in blocks with different styles.

Usage

To apply this component, just add the .uk-block class to a container element.

Example

Block

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

Markup

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

Modifiers

To apply different background colors and paddings, add one of the following classes. If two consecutive blocks have the same background color, the padding will automatically be divided.

Class	Description
`.uk-block-default`	Add the default background color, usually white or similar.
`.uk-block-muted`	Adds a light background color.
`.uk-block-primary`	Adds a primary background color.
`.uk-block-secondary`	Adds a another background color, usually a dark one.

NOTE To properly display colors, borders and other elements on colored blocks, you might want to apply the .uk-contrast class from the Contrast component.

Example

Primary

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

Markup

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

Padding

To add a larger padding to your block, just add the .uk-block-large class. You can also remove the block's padding using one of the .uk-padding-* classes from the Utility component.

Example

Large

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

Markup

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