Section

Create horizontal layout sections with different background colors and styles.

Section

Create horizontal layout sections with different background colors and styles.

Usage

Sections are used to separate the content of a page into differently styled blocks. To apply this component, just add the .uk-section class to a container element. You can place a container from the Container component to modify the width of the content inside sections and add horizontal padding. Note that the padding of a nested container will be reset.

<div class="uk-section">
    <div class="uk-container"></div>
</div>

By default, a section is blank. That is why it is important to add a modifier class for styling. In our example we are using the .uk-section-muted class. Normally, the section is the outermost element of a page, so this example doesn’t quite reflect the realistic usage of this component.

Style modifiers

To apply different background colors and paddings, add one of the following classes.

ClassDescription
.uk-section-defaultAdds the default background color of your site.
.uk-section-mutedAdds a muted background color.
.uk-section-primaryAdds a primary background color.
.uk-section-secondaryAdds a secondary background color.
<div class="uk-section uk-section-primary"></div>

Preserve color

The .uk-section-primary and .uk-section-secondary classes are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add the .uk-preserve-color class.

<div class="uk-section uk-section-primary uk-preserve-color"></div>

Size modifier

You can add different paddings to each section or remove it altogether.

ClassDescription
.uk-section-xsmallAdd this class to decrease a section’s padding to a minimum.
.uk-section-smallAdd this class to decrease a section’s padding.
.uk-section-largeAdd this class to increase a section’s padding.
.uk-section-xlargeAdd this class to further increase a section’s padding.
.uk-padding-remove-verticalAdd this class from the Padding component to remove a section’s padding.

Overlap modifier

Some UIkit themes use richer styles, including textured backgrounds and borders. In this case, you can add the .uk-section-overlap class, to apply a border image and a negative offset to the following section. Note that this only works in styles that implement the feature, if there are subsequent sections.

<div class="uk-section uk-section-overlap"></div>