A collection of useful text utility classes to style your content.

Text styles

UIkit offers various text utlities to style your text.

---

Text alignment

Add one of these useful classes to align your text.

Example

---

Vertical alignment

Add one of these classes to vertically align text to an object.

Example

---

Text wrapping

Add one of these useful classes to wrap your text.

Defines different styles for progress bars.

Usage

The progress bar consists of a background bar and the progress bar itself, indicating the increase.

Example

Markup

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>

---

Size modifiers

Add the .uk-progress-mini or .uk-progress-small class to change the size of the bar.

Example

Markup

<div class="uk-progress uk-progress-mini">...</div>
<div class="uk-progress uk-progress-small">...</div>

---

Color modifiers

To apply different colors to your progress bars, just add the .uk-progress-success, .uk-progress-warning or .uk-progress-danger class.

Example

Markup

<div class="uk-progress uk-progress-success">...</div>
<div class="uk-progress uk-progress-warning">...</div>
<div class="uk-progress uk-progress-danger">...</div>

---

Striped

To create a striped progress bar, use the .striped class.

Example

Markup

<div class="uk-progress uk-progress-striped">...</div>

You can even animate the striped bar. To do so, just add the .uk-active class.

Example

Markup

<div class="uk-progress uk-progress-striped uk-active">...</div>

---

Combinable

All modifiers of the Progress component can be combined with each other.

Example

Markup

<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>

Create an image overlay, which comes in different styles.

Usage

This component can be applied to an image, an anchor or text. Just add the .uk-overlay to a container element and the .uk-overlay-area class to a <div> to create the overlay itself.

Example

Markup

<!-- This is a div with an overlay -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</div>

<!-- This is an anchor with an overlay -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</a>

---

Overlay area content

By default, the overlay displays an icon. But you can also enter your own content, like text or a button. Just add the .uk-overlay-area-content class to a <div> element inside the overlay area.

Example

<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">...</div>
    </div>
</div>

---

Overlay toggle

To toggle the overlay by hovering the area around it, like a caption for example, just add the .uk-overlay-toggle class.

Example

Markup

<figure class="uk-overlay-toggle">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-area"></div>
    </div>
    <figcaption>...</figcaption>
</figure>

---

Overlay caption

Add the .uk-overlay-caption class to create an overlay with a text caption.

Example

Markup

<!-- This is a div with an overlay caption -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</div>

<!-- This is an anchor with an overlay caption -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</a>

---

Overlay with thumbnails

You can also apply an overlay to a thumbnail from the Thumbnail component. To toggle the overlay by hovering the thumbnail's caption or frame, just add the .uk-overlay-toggle class.

Example

Markup

<a class="uk-thumbnail uk-overlay-toggle" href="">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-caption">...</div>
    </div>
</a>

Create different thumbnail images, which come in various styles and sizes.

Usage

To apply this component, just add the .uk-thumbnail class to an <img>, <a> or <figure> element.

Example

Markup

<!-- This is an image as a thumbnail -->
<img class="uk-thumbnail" src="" alt="">

<!-- This is an anchor as a thumbnail -->
<a class="uk-thumbnail" href=""><img src="" alt=""></a>

<!-- This is a figure as a thumbnail -->
<figure class="uk-thumbnail"><img src="" alt=""></figure>

---

Caption

Add the .uk-thumbnail-caption class to a <div> element to apply a text caption under the image.

Example

Markup

<!-- This is a div as a thumbnail with a caption -->
<div class="uk-thumbnail">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</div>

<!-- This is an anchor as a thumbnail with a caption -->
<a class="uk-thumbnail" href="">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</a>

<!-- This is a figure as a thumbnail with a caption -->
<figure class="uk-thumbnail">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">...</figcaption>
</figure>

---

Size modifiers

Apply the .uk-thumbnail-large, .uk-thumbnail-medium, .uk-thumbnail-small or .uk-thumbnail-mini classes to resize images. The Base component is required to make the images responsive by default.

Example

Markup

<div class="uk-thumbnail uk-thumbnail-large">...</div>
<div class="uk-thumbnail uk-thumbnail-medium">...</div>
<div class="uk-thumbnail uk-thumbnail-small">...</div>
<div class="uk-thumbnail uk-thumbnail-mini">...</div>

You can even scale a thumbnail beyond its proper size, so that it extends to the full width of its parent element. Just add the .uk-thumbnail-expand class.

Example

Markup

<div class="uk-thumbnail uk-thumbnail-expand">...</div>

---

Grid

You can easily create a grid with thumbnails by using the Grid component.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
    <div class="uk-width-medium-1-2">
        <div class="uk-grid">
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        </div>
</div>

Easlily create nicely looking badges to label and highlight your content.

Usage

To create a badge, just add the .uk-badge class to a <div> or <span> element.

Example

Info New Free

Markup

<div class="uk-badge">...</div>

---

Modifiers

To display badges in a different style, just add modifier classes to the .uk-badge class. These modifiers can be combined with each other.

Notification

Add the .uk-badge-notification class to indicate a notification, typically it is used with numbers.

Example

1 2 3 10 100

Markup

<div class="uk-badge uk-badge-notification">...</div>

---

Color Modifier

Add the .uk-badge-success, .uk-badge-warning or .uk-badge-danger class for additional colors.

Example

Success Warning Danger

1 10 1 10 1 10

Markup

<div class="uk-badge uk-badge-success">...</div>
<div class="uk-badge uk-badge-warning">...</div>
<div class="uk-badge uk-badge-danger">...</div>