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.
Display your content in multiple text columns without having to split it into several containers.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Column component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
column: {
hooks: {},
media: true
}
}
}),Add one of the .uk-column-* classes to an element to display its inline content in multiple columns.
| Class | Description |
|---|---|
.uk-column-1-2 | Display the content in two columns. |
.uk-column-1-3 | Display the content in three columns. |
.uk-column-1-4 | Display the content in four columns. |
.uk-column-1-5 | Display the content in five columns. |
.uk-column-1-6 | Display the content in six columns. |
<div class="uk-column-1-2"></div>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.
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.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
<div class="uk-column-1-2">
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
</p>
</div>UIkit provides a number of responsive column classes. Basically, they work just like the usual column classes, except that they have suffixes that represent the breakpoint from which they come to effect.
| Class | Description |
|---|---|
.uk-column-1-2@s to .uk-column-1-6@s | Only affects device widths of 640px and higher. |
.uk-column-1-2@m to .uk-column-1-6@m | Only affects device widths of 768px and higher. |
.uk-column-1-2@l to .uk-column-1-6@l | Only affects device widths of 1024px and higher. |
.uk-column-1-2@xl to .uk-column-1-6@xl | Only affects device widths of 1280px and higher. |
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l"></div>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.
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.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l">
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
</p>
</div>To display a vertical line between columns, add the .uk-column-divider class.
<div class="uk-column-divider uk-column-1-2"></div>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.
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.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
<div class="uk-column-divider uk-column-1-2">
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
</p>
</div>To have an inline element span the whole width of the columns, add the .uk-column-span class to the inner element.
<div class="uk-column-1-2">
…
<p class="uk-column-span"></p>
…
</div>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.
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.
All we have to decide is what to do with the time that is given us.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
<div class="uk-column-divider uk-column-1-2">
<p class="uk-margin">
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.
</p>
<p class="uk-margin">
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.
</p>
<blockquote cite="#" class="uk-column-span uk-blockquote">
<p class="uk-margin">
All we have to decide is what to do with the time that is given us.
</p>
<footer>
Gandalf in in
<cite><a class="uk-link" href="">The Fellowship of the Ring</a></cite>
</footer>
</blockquote>
<p class="uk-margin">
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. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore.
</p>
</div>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-misc | * |