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.
A collection of utility classes to add spacing between elements and their content.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Padding component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
padding: {
hooks: {},
media: true
}
}
}),To apply this component, add one of the following classes to a block element.
| Class | Description |
|---|---|
.uk-padding | Adds default padding to the element. |
.uk-padding-small | Adds small padding to the element. |
.uk-padding-large | Adds large padding to the element. |
<div class="uk-padding"></div><div class="uk-width-1-2@s uk-padding uk-background-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>In some cases you want to remove padding from an element, rather than adding it. To do so, apply one of the following classes.
| Class | Description |
|---|---|
.uk-padding-remove | Removes all padding from an element. |
.uk-padding-remove-top | Removes top padding from an element. |
.uk-padding-remove-bottom | Removes bottom padding from an element. |
.uk-padding-remove-left | Removes left padding from an element. |
.uk-padding-remove-right | Removes right padding from an element. |
.uk-padding-remove-vertical | Removes top and bottom padding from an element. |
.uk-padding-remove-horizontal | Removes left and right padding from an element. |