UIkit Section

UIkit Section– UIkit provides css classes to create horizontal layout sections with different styles. It is very simple to create sections in UIkit.

UIkit Section Example

Sections are basically used to separate the page in different-different blocks. To create a section you just need to add class .uk-section. Here is simple example of section.

By default sections are blank so we need to add class .uk-section-muted. Let us create a simple container.

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

Style Modifiers

You can add following modifiers to change the style of modifiers.

• .uk-section-default– This class will add the background color to the section.
• .uk-section-muted– This adds the muted background color.
• .uk-section-primary– This adds primary background color.
• .uk-section-secondary– This adds secondary background color.

Example

<div class="uk-section uk-section-primary">
   <div class="uk-container"><h1>Primary Section..</h1></div>
</div>

Size Modifier

Following size modifiers are available in UIkit css framework.

• .uk-section-xsmall– This class adds the minimum padding.
• .uk-section-small– This decreases the default padding og section.
• .uk-section-large– This class increases the padding.
• .uk-section-xlarge– This increases the default padding.
• .uk-padding-remove-vertical– This removes the vertical padding.

Overlap Modifier

Add class .uk-section-overlap to add border image and negative offset overlap.

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