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.

Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  • <div class="uk-child-width-1-3@s" uk-grid>
  <div>
    <div class="uk-panel">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div>
    <div class="uk-panel">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div>
    <div class="uk-panel">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

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.

Copy to clipboard 
  • <div class="uk-panel uk-panel-scrollable">
  <ul class="uk-list">
    <li>
      <label><input class="uk-checkbox" type="checkbox" /> Category 1</label>
    </li>
    <li>
      <label><input class="uk-checkbox" type="checkbox" /> Category 2</label>
      <ul>
        <li>
          <label
            ><input class="uk-checkbox" type="checkbox" /> Category 2.1</label
          >
        </li>
        <li>
          <label
            ><input class="uk-checkbox" type="checkbox" /> Category 2.2</label
          >
        </li>
        <li>
          <label
            ><input class="uk-checkbox" type="checkbox" /> Category 2.3</label
          >
          <ul>
            <li>
              <label
                ><input class="uk-checkbox" type="checkbox" /> Category
                2.3.1</label
              >
            </li>
            <li>
              <label
                ><input class="uk-checkbox" type="checkbox" /> Category
                2.3.2</label
              >
            </li>
          </ul>
        </li>
        <li>
          <label
            ><input class="uk-checkbox" type="checkbox" /> Category 2.4</label
          >
        </li>
      </ul>
    </li>
    <li>
      <label><input class="uk-checkbox" type="checkbox" /> Category 3</label>
    </li>
    <li>
      <label><input class="uk-checkbox" type="checkbox" /> Category 4</label>
    </li>
  </ul>
</div>

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.
Copy to clipboard
  • Right
    Left
  • <div class="uk-clearfix">
  <div class="uk-float-right">
    <div class="uk-card uk-card-body uk-card-default">Right</div>
  </div>
  <div class="uk-float-left">
    <div class="uk-card uk-card-body uk-card-default">Left</div>
  </div>
</div>

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.

Copy to clipboard
  • Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer 
  • <div class="uk-height-small uk-overflow-auto">
  <table class="uk-table-condensed uk-table uk-table-striped uk-text-nowrap">
    <thead>
      <tr>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
      <tr>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
        <td>Table Data</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Table Footer</td>
        <td>Table Footer</td>
        <td>Table Footer</td>
        <td>Table Footer</td>
        <td>Table Footer</td>
        <td>Table Footer</td>
        <td>Table Footer</td>
        <td>Table Footer</td>
      </tr>
    </tfoot>
  </table>
</div>

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.

Copy to clipboard

  • Some content before the overflow auto container.

    Some content after the overflow auto container.

  • <div class="uk-height-medium">
  <div class="js-wrapper">
    <p>Some content before the overflow auto container.</p>

    <div
      uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper"
    >
      <div class="uk-grid-small" uk-grid>
        <div class="uk-width-1-2">
          <img src="/images/light.jpg" width="1800" height="1200" alt="" />
        </div>
        <div class="uk-width-1-2">
          <img src="/images/dark.jpg" width="1800" height="1200" alt="" />
        </div>
        <div class="uk-width-1-2">
          <img src="/images/photo.jpg" width="1800" height="1200" alt="" />
        </div>
        <div class="uk-width-1-2">
          <img src="/images/photo2.jpg" width="1800" height="1200" alt="" />
        </div>
      </div>
    </div>

    <p>Some content after the overflow auto container.</p>
  </div>
</div>

It’s often used within the Modal component.

<div id="my-id" uk-modal>
  <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>
Copy to clipboard
  • Open 
  • <a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Open</a>

<div id="modal-overflow" uk-modal>
  <div class="uk-modal-dialog">
    <button class="uk-modal-close-default" type="button" uk-close></button>

    <div class="uk-modal-header">
      <h2 class="uk-modal-title">Headline</h2>
    </div>

    <div class="uk-modal-body" uk-overflow-auto>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>

    <div class="uk-modal-footer uk-text-right">
      <button class="uk-modal-close uk-button uk-button-default" type="button">
        Cancel
      </button>
      <button class="uk-button uk-button-primary" type="button">Save</button>
    </div>
  </div>
</div>

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

OptionValueDefaultDescription
sel-containerString.uk-modalCSS selector for the container element which provides the height.
sel-contentString.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

Copy to clipboard 
  •             
<!-- Resize vertically -->
<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
                
<!-- Resize horizontally and vertically -->
<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>
            
        
  • <div class="uk-child-width-1-2@s" uk-grid>
  <div>
    <pre class="uk-overflow-auto uk-resize-vertical">
            <code>
&lt;!-- Resize vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
  </div>
  <div>
    <pre class="uk-overflow-auto uk-resize">
            <code>
&lt;!-- Resize horizontally and vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
  </div>
</div>

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>
Copy to clipboard
  • Overlay 
  • <div class="uk-inline">
  <img src="/images/photo.jpg" width="300" height="200" alt="" />
  <div
    class="uk-flex uk-flex-center uk-flex-middle uk-overlay uk-overlay-default uk-position-cover uk-position-medium"
  >
    Overlay
  </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 UIkit, 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"
/>
Copy to clipboard 
  • <div class="uk-child-width-1-2@s" uk-grid>
  <div>
    <img
      class="uk-object-cover"
      src="/images/photo.jpg"
      width="1000"
      height="1000"
      alt=""
      style="aspect-ratio: 1 / 1"
    />
  </div>
  <div>
    <img
      class="uk-object-contain"
      src="/images/photo.jpg"
      width="1000"
      height="1000"
      alt=""
      style="aspect-ratio: 1 / 1"
    />
  </div>
</div>

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.
Copy to clipboard
  • Border rounded Border circle Border pill 
  • <div class="uk-flex uk-overflow-auto">
  <img
    class="uk-margin-right uk-border-rounded"
    src="/images/avatar.jpg"
    width="200"
    height="200"
    alt="Border rounded"
  />
  <img
    class="uk-margin-right uk-border-circle"
    src="/images/avatar.jpg"
    width="200"
    height="200"
    alt="Border circle"
  />
  <img
    class="uk-border-pill"
    src="/images/avatar.jpg"
    width="200"
    height="200"
    alt="Border pill"
  />
</div>

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-shadowAdd this class to apply a 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>
Copy to clipboard
  • Small
    Medium
    Large
    X-Large
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
  <div>
    <div class="uk-padding uk-box-shadow-small">Small</div>
  </div>

  <div>
    <div class="uk-padding uk-box-shadow-medium">Medium</div>
  </div>

  <div>
    <div class="uk-padding uk-box-shadow-large">Large</div>
  </div>

  <div>
    <div class="uk-padding uk-box-shadow-xlarge">X-Large</div>
  </div>
</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>
Copy to clipboard
  • Box shadow bottom
  • <div
  class="uk-width-1-2@s uk-text-center uk-box-shadow-small uk-box-shadow-bottom"
>
  <div class="uk-background-default uk-padding-large">Box shadow bottom</div>
</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>
Copy to clipboard
  • Hover Small
    Hover X-Large
    Small + Hover Large
    X-Large + Hover Medium 
  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
  <div>
    <div class="uk-padding uk-box-shadow-hover-small">Hover Small</div>
  </div>

  <div>
    <div class="uk-padding uk-box-shadow-hover-xlarge">Hover X-Large</div>
  </div>

  <div>
    <div class="uk-padding uk-box-shadow-small uk-box-shadow-hover-large">
      Small + Hover Large
    </div>
  </div>

  <div>
    <div class="uk-padding uk-box-shadow-xlarge uk-box-shadow-hover-medium">
      X-Large + Hover Medium
    </div>
  </div>
</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.

Copy to clipboard

  • Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

  • <p class="uk-dropcap">
  Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
  sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.
</p>

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

<a class="uk-logo" href=""></a>
Copy to clipboard 
  • <a class="uk-logo" href="#">Logo</a>

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-overlay uk-overlay-primary uk-blend-multiply"></div>
  <img src="" width="" height="" alt="" />
</div>
Copy to clipboard
  • Blend Multiply

    Multiply

    Blend Screen

    Screen

    Blend Overlay

    Overlay

    Blend Darken

    Darken

    Blend Lighten

    Lighten

    Blend Color Dodge

    Color Dodge

    Blend Color Burn

    Color Burn

    Blend Hard Light

    Hard Light

    Blend Soft Light

    Soft Light

    Blend Difference

    Difference

    Blend Exclusion

    Exclusion

    Blend Hue

    Hue

    Blend Saturation

    Saturation

    Blend Color

    Color

    Blend Luminosity

    Luminosity

  • <div class="uk-child-width-1-3@s uk-grid-small uk-child-width-1-2" uk-grid>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-multiply"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Multiply"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Multiply</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-screen"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Screen"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Screen</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-overlay"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Overlay"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Overlay</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-darken"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Darken"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Darken</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-lighten"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Lighten"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Lighten</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-color-dodge"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Color Dodge"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Color Dodge</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-color-burn"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Color Burn"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Color Burn</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-hard-light"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Hard Light"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Hard Light</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-soft-light"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Soft Light"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Soft Light</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-difference"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Difference"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Difference</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-exclusion"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Exclusion"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Exclusion</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-hue"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Hue"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Hue</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-saturation"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Saturation"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Saturation</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-color"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Color"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Color</p>
      </div>
    </div>
  </div>
  <div>
    <div class="uk-inline uk-background-primary">
      <img
        class="uk-blend-luminosity"
        src="/images/dark.jpg"
        width="1800"
        height="1200"
        alt="Blend Luminosity"
      />
      <div class="uk-position-center">
        <p class="uk-h4 uk-margin-remove">Luminosity</p>
      </div>
    </div>
  </div>
</div>

Transform center

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

Copy to clipboard 
  • <div class="uk-inline">
  <img src="/images/light.jpg" width="1800" height="1200" alt="" />
  <a
    class="uk-position-absolute uk-transform-center"
    style="left: 50%; top: 50%"
    href="#"
    uk-marker
  ></a>
</div>

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-animation-scale-up uk-transform-origin-bottom-right"></div>
Copy to clipboard

  • Bottom Right

    Top Center

    Bottom Center

  • <div class="uk-child-width-1-3@m" uk-grid>
  <div class="uk-animation-toggle" tabindex="0">
    <div
      class="uk-animation-scale-up uk-card uk-card-body uk-card-default uk-transform-origin-bottom-right"
    >
      <p class="uk-text-center">Bottom Right</p>
    </div>
  </div>
  <div class="uk-animation-toggle" tabindex="0">
    <div
      class="uk-animation-scale-up uk-card uk-card-body uk-card-default uk-transform-origin-top-center"
    >
      <p class="uk-text-center">Top Center</p>
    </div>
  </div>
  <div class="uk-animation-toggle" tabindex="0">
    <div
      class="uk-animation-scale-up uk-card uk-card-body uk-card-default uk-transform-origin-bottom-center"
    >
      <p class="uk-text-center">Bottom Center</p>
    </div>
  </div>
</div>

Disabled

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

Copy to clipboard
  • Disabled 
  • <a class="uk-disabled uk-button uk-button-default" href="#">Disabled</a>

Drag

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

<div class="uk-drag"></div>
Copy to clipboard 
  • <div
  class="uk-background-muted uk-padding uk-text-center uk-drag uk-width-small"
>
  <uk-icon icon="move"></uk-icon>
</div>

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

Customize