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 Add this class to a paragraph which contains meta data about an article or similar.

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-large Add this class to increase the font size.

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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.

Text transform

The following classes will transform text into uppercased, capitalized or lowercased characters.

Class Description
.uk-text-uppercase Add this class to transform your text to uppercase.
.uk-text-capitalize Add this class to transform your text to capitalize.
.uk-text-lowercase Add this class to transform your text to lowercase.

Text Colour

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.
.uk-text-info Add this class to indicate informations.

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.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-left
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center

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.
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.

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.

Text background


© 2019 Sasuke. All Rights Reserved.