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.
Control the alignment of inline elements depending on the viewport size.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Align component
within the ui()
plugin.
import ui from "franken-ui";
ui({
components: {
align: {
hooks: {},
media: true
}
}
}),
To align images or other elements with spacing between the text and the element, add one of these classes.
Class | Description |
---|---|
.uk-align-left | Floats the element to the left and creates right and bottom margin. |
.uk-align-right | Floats the element to the right and creates left and bottom margin. |
.uk-align-center | Centers the element and creates bottom margin. |
<img class="uk-align-left" src="" width="" height="" alt="" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-panel">
<img
class="uk-align-left uk-margin-remove-adjacent"
src="/images/light.jpg"
width="225"
height="150"
alt="Example image"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
UIkit provides a number of responsive alignment classes. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.
Class | Description |
---|---|
.uk-align-left@s .uk-align-right@s | Only affects device widths of 640px and higher. |
.uk-align-left@m .uk-align-right@m | Only affects device widths of 768px and higher. |
.uk-align-left@l .uk-align-right@l | Only affects device widths of 1024px and higher. |
.uk-align-left@xl .uk-align-right@xl | Only affects device widths of 1280px and higher. |
<img
class="uk-align-right@m uk-align-center"
src=""
width=""
height=""
alt=""
/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-panel">
<img
class="uk-align-right@m uk-align-center uk-margin-remove-adjacent"
src="/images/light.jpg"
width="225"
height="150"
alt="Example image"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
Learn more about using hooks.
Hook Name | Affected Classes |
---|---|
hook-misc | * |