Text
A collection of utility classes to style text.
Combine this component with the Heading component to style your content.
# Style modifiers
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 |
# Font size
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. |
# Font weight
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. |
# Font style
Add the .uk-text-italic class to create italic text.
# Text transform
The following classes will transform text into uppercased, capitalized or lowercased 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. |
# Text decoration
Add the .uk-text-decoration-none class to remove any text decoration from a link.
# Text color
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-emphasis | Add this class to emphasize 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. |
# Text background
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.
<h1><span class="uk-text-background"></span></h1>
# Text alignment
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. |
<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-text-left uk-card-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-left</code>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-text-right uk-card-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right</code>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-text-center uk-card-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center</code>
</div>
</div>
</div>
</div>
# Responsive
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 960px and larger. |
.uk-text-left@l.uk-text-center@l.uk-text-right@l | Affects device widths of 1200px and larger. |
.uk-text-left@xl.uk-text-center@xl.uk-text-right@xl | Affects device widths of 1600px and larger. |
<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-text-center@s uk-card-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@s</code>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-text-right@l uk-card-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right@l</code>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-text-center@m uk-card-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@m</code>
</div>
</div>
</div>
</div>
# Vertical alignment
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. |
<div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
<div>
<img src="images/avatar.jpg" width="50" height="50">
<span class="uk-text-top">Lorem ipsum.</span>
</div>
<div>
<img src="images/avatar.jpg" width="50" height="50">
<span class="uk-text-middle">Lorem ipsum.</span>
</div>
<div>
<img src="images/avatar.jpg" width="50" height="50">
<span class="uk-text-bottom">Lorem ipsum.</span>
</div>
</div>
# Text wrapping
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. |
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-panel uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div>
<div class="uk-panel uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
</div>
</div>