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.
This component allows you to align and center your page content.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Container
component within the ui()
plugin.
import ui from "franken-ui";
ui({
components: {
container: {
hooks: {},
media: true
}
}
}),
Add the .uk-container
class to a block element to give it a max-width and wrap the main content of your website. The element will be centered and have padding on the sides, that adapts automatically for large screens.
Note The padding of nested containers will be removed to avoid unnecessary spacing.
<div class="uk-container"></div>
Add one of the following classes to the container to apply a different max-width.
Class | Description |
---|---|
.uk-container-xsmall | Add this class for a xsmall container. |
.uk-container-small | Add this class for a small container. |
.uk-container-large | Add this class for a large container. |
.uk-container-xlarge | Add this class for a xlarge container. |
.uk-container-expand | Add this class, if you do not want to limit the container width but still want the dynamic horizontal padding. |
<div class="uk-container uk-container-xsmall"></div>
<div class="uk-container uk-container-small"></div>
<div class="uk-container uk-container-large"></div>
<div class="uk-container uk-container-xlarge"></div>
<div class="uk-container uk-container-expand"></div>
You can apply this component to modify the width of content inside sections from the Section component.
<div class="uk-section uk-section-primary">
<div class="uk-container uk-container-small"></div>
</div>
Learn more about using hooks.
Hook Name | Affected Classes |
---|---|
hook-misc | * |