# 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.

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.

### 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.

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.

### 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.

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.

### Markup

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