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 style text.
Combine this component with the Heading component to style your content.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Text component
within the ui()
plugin.
UIkit offers various text utilities to style your text.
Class | Description |
---|---|
.uk-text-lead | Add this class to highlight text, for example in article subtitles. |
.uk-text-meta |
The following classes will modify the font size of your text.
Class | Description |
---|---|
.uk-text-small | Add this class to decrease the font size. |
.uk-text-default | Add this class to set default the font size. |
.uk-text-large | Add this class to increase the font size. |
Add one of the following classes to modify the font-weight of your text.
Class | Description |
---|---|
.uk-text-light | Add this class to apply a font-weight of 300 . |
.uk-text-normal | Add this class to apply a font-weight of 400 . |
.uk-text-bold | Add this class to apply a font-weight of 700 . |
.uk-text-lighter | Add this class to apply a lighter font weight. |
.uk-text-bolder | Add this class to apply a bolder font weight. |
Add the .uk-text-italic
class to create italic text.
The following classes will transform the text into uppercased, capitalized or lowercase characters.
Class | Description |
---|---|
.uk-text-capitalize | Add this class to transform your text to capitalize. |
.uk-text-uppercase | Add this class to transform your text to uppercase. |
.uk-text-lowercase | Add this class to transform your text to lowercase. |
Add the .uk-text-decoration-none
class to remove any text decoration from a link.
Use one of these classes to apply a different color to text elements.
Class | Description |
---|---|
.uk-text-muted | Add this class to mute text. |
.uk-text-primary | Add this class to emphasize text with the primary color. |
.uk-text-secondary | Add this class to emphasize text with the secondary color. |
.uk-text-success | Add this class to indicate success. |
.uk-text-warning | Add this class to indicate a warning. |
.uk-text-danger | Add this class to indicate danger. |
To apply a gradient or background image to text, add the .uk-text-background
class to a <span>
element inside the text element. Styles that don’t define a background-image
, will apply the primary color.
Add one of these useful classes to align your text.
Class | Description |
---|---|
.uk-text-left | Aligns text to the left. |
.uk-text-right | Aligns text to the right. |
.uk-text-center | Centers text horizontally. |
.uk-text-justify | Justifies text. |
.uk-text-left
.uk-text-right
.uk-text-center
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-text-left@s .uk-text-center@s .uk-text-right@s | Affects device widths of 640px and larger. |
.uk-text-left@m .uk-text-center@m .uk-text-right@m | Affects device widths of 768px and larger. |
.uk-text-left@l .uk-text-center@l .uk-text-right@l | Affects device widths of 1024px and larger. |
.uk-text-left@xl .uk-text-center@xl .uk-text-right@xl | Affects device widths of 1280px and larger. |
.uk-text-center@s
.uk-text-right@l
.uk-text-center@m
Add one of these classes to vertically align text to an object.
Class | Description |
---|---|
.uk-text-top | Aligns text to the top. |
.uk-text-middle | Centers text vertically. |
.uk-text-bottom | Aligns text to the bottom. |
.uk-text-baseline | Aligns text to the baseline. |
Add one of these useful classes to wrap your text.
Class | Description |
---|---|
.uk-text-truncate | Prevents text from wrapping into multiple lines, truncating it and displaying an ellipsis instead. |
.uk-text-break | Breaks strings, if their length exceeds the width of their container. |
.uk-text-nowrap | Prevents text from wrapping into multiple lines. |