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.

ClassDescription
.uk-text-leadAdd this class to highlight text, for example in article subtitles.
.uk-text-metaAdd this class to a paragraph that contains meta text about an article or similar.

Font size

The following classes will modify the font size of your text.

ClassDescription
.uk-text-smallAdd this class to decrease the font size.
.uk-text-defaultAdd this class to set default the font size.
.uk-text-largeAdd this class to increase the font size.

Font weight

Add one of the following classes to modify the font-weight of your text.

ClassDescription
.uk-text-lightAdd this class to apply a font-weight of 300.
.uk-text-normalAdd this class to apply a font-weight of 400.
.uk-text-boldAdd this class to apply a font-weight of 700.
.uk-text-lighterAdd this class to apply a lighter font weight.
.uk-text-bolderAdd 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 the text into uppercased, capitalized or lowercase characters.

ClassDescription
.uk-text-capitalizeAdd this class to transform your text to capitalize.
.uk-text-uppercaseAdd this class to transform your text to uppercase.
.uk-text-lowercaseAdd 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.

ClassDescription
.uk-text-mutedAdd this class to mute text.
.uk-text-primaryAdd this class to emphasize text with the primary color.
.uk-text-secondaryAdd this class to emphasize text with the secondary color.
.uk-text-successAdd this class to indicate success.
.uk-text-warningAdd this class to indicate a warning.
.uk-text-dangerAdd 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.

ClassDescription
.uk-text-leftAligns text to the left.
.uk-text-rightAligns text to the right.
.uk-text-centerCenters text horizontally.
.uk-text-justifyJustifies text.
Copy to clipboard
  • 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
  • <div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
      <div>
        <div class="uk-card-small uk-card uk-card-default">
          <div class="uk-card-body uk-text-left">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            <code>.uk-text-left</code>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-card-small uk-card uk-card-default">
          <div class="uk-card-body uk-text-right">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            <code>.uk-text-right</code>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-card-small uk-card uk-card-default">
          <div class="uk-card-body uk-text-center">
            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.

ClassDescription
.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.
Copy to clipboard
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@s
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right@l
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@m
  • <div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
      <div>
        <div class="uk-card-small uk-card uk-card-default">
          <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-small uk-card uk-card-default">
          <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-small uk-card uk-card-default">
          <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.

ClassDescription
.uk-text-topAligns text to the top.
.uk-text-middleCenters text vertically.
.uk-text-bottomAligns text to the bottom.
.uk-text-baselineAligns text to the baseline.
Copy to clipboard
  • Lorem ipsum.
    Lorem ipsum.
    Lorem ipsum.
  • <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
      <div>
        <img
          class="uk-inline uk-margin-small-right"
          src="/images/avatar.jpg"
          width="50"
          height="50"
        />
        <span class="uk-text-top">Lorem ipsum.</span>
      </div>
      <div>
        <img
          class="uk-inline uk-margin-small-right"
          src="/images/avatar.jpg"
          width="50"
          height="50"
        />
        <span class="uk-text-middle">Lorem ipsum.</span>
      </div>
      <div>
        <img
          class="uk-inline uk-margin-small-right"
          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.

ClassDescription
.uk-text-truncatePrevents text from wrapping into multiple lines, truncating it and displaying an ellipsis instead.
.uk-text-breakBreaks strings, if their length exceeds the width of their container.
.uk-text-nowrapPrevents text from wrapping into multiple lines.
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
  • <div class="uk-child-width-1-2@s" uk-grid>
      <div>
        <div class="uk-text-truncate uk-panel">
          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-text-break uk-panel">
          Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
        </div>
      </div>
    </div>

Theme development

On your tailwind.config.js file, add the Text component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        text: {
            hooks: {},
            media: true
        }
    }
}),