Utility

A collection of useful utility classes to style your content.

Utility

A collection of useful utility classes to style your content.

Panel

UIkit uses panels to outline certain sections of your content. These can be arranged in grid columns from the Grid component, for example.

Add the .uk-panel class to a <div> element to create a position context, set box-sizing to border-box, apply a clearfix and to remove the bottom margin of its last child element.

Scrollable panel

Add the .uk-panel-scrollable class to give the panel a fixed height and make it scrollable, if its content exceeds the height. You can also add one of the .uk-height-* classes to apply a different height.

Clearing and floating

Floating elements are taken from the document flow and aligned to the left or right side of their container. It is important to clear floats or in the worst case, you might end up with a scrambled site. The following classes will help you to set up basic layouts.

ClassDescription
.uk-float-leftAdd this class to float the element to the left.
.uk-float-rightAdd this class to float the element to the right.
.uk-clearfixAdd this class to a parent container to clear floats. Alternatively, you can create a new block format context, e.g. by adding the .uk-overflow-hidden class.

Overflow

These utilities provide different classes to modify an element’s overflow behavior.

ClassDescription
.uk-overflow-hiddenAdd this class to clip content that exceeds the dimensions of its container.
.uk-overflow-autoAdd this class to create a container that provides a horizontal or vertical scrollbar whenever the elements content it are wider or higher than the container itself.

Note The .uk-overflow-auto class is useful when having to handle tables on a responsive website, which at some point would just get too big. It also works great on <pre> elements.

Overflow Auto

Add the uk-overflow-auto attribute to expand an element’s height to make it fill the remaining height of a parent container. It provides a vertical scrollbar if its content is higher than the expanded height.

It’s often used within the Modal component.

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>

You can change the target heights by adding the selContainer and selContent options to the attribute. Learn more

OptionValueDefaultDescription
selContainerString.uk-modalCSS selector for the container element which provides the height.
selContentString.uk-modal-dialogCSS selector for the element which wraps the inner content to provide its height.

Resize

These utilities provide different classes for resizing elements.

ClassDescription
.uk-resizeAdd this class to enable horizontal and vertical resizing.
.uk-resize-verticalAdd this class to enable only vertical resizing.

Grab and drag the bottom right corner of each box below to resize it

Display

Add one of these classes to change the display properties of an element.

ClassDescription
.uk-display-blockForces the element to behave like a block element.
.uk-display-inlineForces the element to behave like an inline element.
.uk-display-inline-blockForces the element to behave like an inline-block element.

Inline

These classes are often used to create a position context on containers with an image as a child. The container keeps the same size as the image as well as the responsive behavior. That way content that is placed on top of the image with the Position component will not flow out of the image dimensions.

ClassDescription
.uk-inlineAdd this class to apply inline-block behavior to an element, add a max-width of 100% and to create a position context.
.uk-inline-clipSame as .uk-inline, it but also clips overflowing child elements.
<div class="uk-inline">
    <img src="" width="" height="" alt="">
    <div class="uk-position-cover"></div>
</div>

Responsive objects

In UIkit <img>, <canvas>, <audio> and <video> elements adapt to the width of their parent container by default. To apply responsive behavior to iframes, add the uk-responsive attribute . For other elements or to apply a different behavior, just add one of the following classes.

ClassDescription
.uk-responsive-widthAdd this class to apply the same responsive behavior to any other element. It adjusts the object’s width according to its parent’s width, keeping the original aspect ratio.
.uk-responsive-heightAdd this class to adjust the object’s height (instead of its width) according to its parent’s height, keeping the original aspect ratio.
.uk-preserve-widthAdd this class to avoid the default responsive behavior and preserve the original image dimensions. You can also add the class to a parent element and it will be applied to all relevant elements content it. If you are embedding Google Maps into your site, you may need this to fix the map’s images.
<img class="uk-responsive-height" src="" width="" height="" alt="">

<iframe src="" width="" height="" uk-responsive></iframe>

Object Fit and Position

Define how the content of an image or video should be resized to fit its element.

ClassDescription
.uk-object-coverScales the image by keeping its aspect ratio to completely cover the content box.
.uk-object-containScales the image by keeping its aspect ratio as far as its width and height can fit inside the content box.
.uk-object-fillScales the image to fill the element’s content box.
.uk-object-noneDoesn’t scale the image at all.
.uk-object-scale-downLike contain, but never up-scales.

Note Since images and video are responsive by default in UIki, it’s mandatory to set the aspect ratio when using one of these classes.

<img class="uk-object-cover" src="" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1">

To modify the alignment of the image or video within its element, add one of the uk-object-position-* classes.

ClassDescription
.uk-object-position-top-leftAlign to the top left.
.uk-object-position-top-centerAlign to the top.
.uk-object-position-top-rightAlign to the top right.
.uk-object-position-center-leftAlign to the left.
.uk-object-position-center-centerAlign to the center.
.uk-object-position-center-rightAlign to the right.
.uk-object-position-bottom-leftAlign to the bottom left.
.uk-object-position-bottom-centerAlign to the bottom.
.uk-object-position-bottom-rightAlign to the bottom right.

Border radius

To modify the border radius of an element, like an image, add one of the following classes.

ClassDescription
.uk-border-roundedAdd this class to apply rounded corners.
.uk-border-circleAdd this class to apply a circled shape.
.uk-border-pillAdd this class to apply a pill shape.

Box shadow

You can apply different box shadows to elements. Just add one of the following classes.

ClassDescription
.uk-box-shadow-smallAdd this class to apply a small box shadow.
.uk-box-shadow-mediumAdd this class to apply a medium box shadow.
.uk-box-shadow-largeAdd this class to apply a large box shadow.
.uk-box-shadow-xlargeAdd this class to apply a very large box shadow.
<div class="uk-box-shadow-small"></div>

Box shadow bottom

To apply a box shadow at the bottom of an element so that appears to be hovering, add the .uk-box-shadow-bottom class. This can also be combined with one of the other .uk-box-shadow-* modifiers.

<div class="uk-box-shadow-bottom"></div>

Hover

To apply a box shadow on hover, add one of the following classes. This can also be used to modify the shadow size on hover. To do so, just combine them with one of the classes above.

ClassDescription
.uk-box-shadow-hover-smallAdd this class to apply a small box shadow on hover.
.uk-box-shadow-hover-mediumAdd this class to apply a medium box shadow on hover.
.uk-box-shadow-hover-largeAdd this class to apply a large box shadow on hover.
.uk-box-shadow-hover-xlargeAdd this class to apply a very large box shadow on hover.
<div class="uk-box-shadow-hover-small"></div>

Drop cap

With the .uk-dropcap class you can achieve a drop cap within a text by adding it directly to the <p> element.

With the new .uk-logo class you can easily define your logo, for example within your navbar.

<a class="uk-logo" href=""></a>

Add the .uk-light class from the Inverse component when displaying the image on dark backgrounds, so that its color will automatically be inverted for better visibility.

Logo image

You can also use an <img> element, for example an SVG, as a logo.

<a class="uk-logo" href="">
    <img src="" width="" height="" alt="">
</a>

You can even automatically display alternative logos for light and dark backgrounds by using the Inverse component. Just add the .uk-logo-inverse class to a second logo image. Depending on the color mode, the inverted logo will be displayed when the .uk-light or .uk-dark class is applied to the parent element.

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" width="" height="" alt="">
        <img class="uk-logo-inverse" src="" width="" height="" alt="">
    </a>
</div>

Note To inject an SVG logo as inline SVG, use the SVG component.

Blend modes

Add one of the following classes to apply different blend modes to your backgrounds, for example when placing them on images. You can combine these with the Overlay component. For a better understanding of how background blend modes work, take a look at this CSS Tricks article.

ClassDescription
.uk-blend-multiplyThis class sets the blend mode to multiply.
.uk-blend-screenThis class sets the blend mode to screen.
.uk-blend-overlayThis class sets the blend mode to overlay.
.uk-blend-darkenThis class sets the blend mode to darken.
.uk-blend-lightenThis class sets the blend mode to lighten.
.uk-blend-color-dodgeThis class sets the blend mode to color dodge.
.uk-blend-color-burnThis class sets the blend mode to color burn.
.uk-blend-hard-lightThis class sets the blend mode to hard light.
.uk-blend-soft-lightThis class sets the blend mode to soft light.
.uk-blend-differenceThis class sets the blend mode to difference.
.uk-blend-exclusionThis class sets the blend mode to exclusion.
.uk-blend-hueThis class sets the blend mode to hue.
.uk-blend-saturationThis class sets the blend mode to saturation.
.uk-blend-colorThis class sets the blend mode to color.
.uk-blend-luminosityThis class sets the blend mode to luminosity.
<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" width="" height="" alt="">
</div>

Transform center

To center an element to itself, add the uk-transform-center class. This is particularly useful for absolute positioning.

Transform origin

To modify the origin of an animation, like scaling, add one of the uk-transform-origin-* classes. This can be combined with the Animation component.

ClassDescription
.uk-transform-origin-top-leftThe transition originates from the top left.
.uk-transform-origin-top-centerThe transition originates from the top.
.uk-transform-origin-top-rightThe transition originates from the top right.
.uk-transform-origin-center-leftThe transition originates from the left.
.uk-transform-origin-center-rightThe transition originates from the right.
.uk-transform-origin-bottom-leftThe transition originates from the bottom left.
.uk-transform-origin-bottom-centerThe transition originates from the bottom.
.uk-transform-origin-bottom-rightThe transition originates from the bottom right.
<div class="uk-transform-origin-bottom-right uk-animation-scale-up"></div>

Disabled

To disable the click behavior of any element, like a <a>, <button> or <iframe> element, add the .uk-disabled class.

Drag

To apply a move cursor to elements that are being dragged, add the .uk-drag class.

<div class="uk-drag"></div>

To create a box shadow on an upload area when dragging a file over it, add the .uk-dragover class.