We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create horizontal layout sections with different background colors and styles.
This documentation is a work in progress.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Section component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
section: {
hooks: {},
media: true
}
}
}),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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
<div class="uk-section uk-section-muted">
<div class="uk-container">
<h3>Section</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>To apply different background colors and paddings, add one of the following classes.
| Class | Description |
|---|---|
.uk-section-default | Adds the default background color of your site. |
.uk-section-muted | Adds a muted background color. |
.uk-section-primary | Adds a primary background color. |
.uk-section-secondary | Adds a secondary background color. |
<div class="uk-section uk-section-primary"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
<div class="uk-section uk-section-default">
<div class="uk-container">
<h3>Section Default</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted">
<div class="uk-container">
<h3>Section Muted</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary">
<div class="uk-container">
<h3>Section Primary</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary">
<div class="uk-container">
<h3>Section Secondary</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>
<div class="uk-section-default">
<div
class="uk-section uk-background-cover text-muted-foreground"
style="background-image: url(/images/dark.jpg)"
>
<div class="uk-container">
<h3>Section with Images</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>
</div>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-preserve-color uk-section uk-section-primary"></div><div class="uk-preserve-color uk-section uk-section-primary">
<div class="uk-container">
<div class="uk-margin-medium uk-panel">
<h3>Section Primary with cards</h3>
</div>
<div class="uk-child-width-expand@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-body uk-card-default">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-body uk-card-default">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>You can add different paddings to each section or remove it altogether.
| Class | Description |
|---|---|
.uk-section-xsmall | Add this class to decrease a section’s padding to a minimum. |
.uk-section-small | Add this class to decrease a section’s padding. |
.uk-section-large | Add this class to increase a section’s padding. |
.uk-section-xlarge | Add this class to further increase a section’s padding. |
.uk-padding-remove-vertical | Add this class from the Padding component to remove a section’s padding. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
<div class="uk-section uk-section-large uk-section-muted">
<div class="uk-container">
<h3>Section Large</h3>
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor.
</p>
</div>
</div>
</div>
</div>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>