Components

Accordion

Create a list of items that can be shown individually by clicking an item's header.

  • Item 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Item 2

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Item 3

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.




Multiple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the multiple: true option to the uk-accordion attribute.

  • Item 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Item 2

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Item 3

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

alert

Display success, warning and error messages.

Notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

Notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Custom Style

There are several style modifiers available. Just add one of the following classes to apply a different look.

Deactivate Account

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Filter

Filter or sort items in any given layout by meta data.

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item




Meta Data

Items can have different meta data for filtering. You just need to define the HTML classes or data attributes and create the corresponding CSS selectors for the filter controls. This example uses data attributes for the filter instead of HTML classes

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item large




Multiple Filters

Define different types of meta data and add any number of controls to filter them. The filter controls are exclusive, meaning just one criteria is filtered at a time.

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

Drop

Position any element in relation to another element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.





Style modifiers

You can place a grid from the Grid component inside a drop. Just wrap the content with a <div> element and add the uk-grid attribute. If the grid should stack automatically, whenever the drop no longer fits its container, just add the .uk-drop-grid class

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.





Position

Add one of the following options to the uk-drop attribute to adjust the drop's alignment.

<div uk-drop="pos: top-left"></div>
bottom-left bottom-center bottom-justify top-left top-center top-right top-justify left-top left-center left-bottom right-top right-center right-bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.





Offset

To define a custom offset between the drop container and the toggle, add the offset option with a value for the offset, measured in pixels.

<div uk-drop="offset: 80"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Dropdown

Defines different styles for a toggleable dropdown.








Position

Add one of the following options to the uk-dropdown attribute to adjust the drop's alignment.

<div uk-dropdown="pos: top-left"></div>
bottom-left bottom-center bottom-justify top-left top-center top-right top-justify left-top left-center left-bottom right-top right-center right-bottom









Offset

To define a custom offset between the drop container and the toggle, add the offset option with a value for the offset, measured in pixels.

<div uk-dropdown="offset: 80"></div>


Lightbox

Create a responsive lightbox gallery with images and videos


The lightbox component is fully responsive and supports touch and swipe navigation, as well as mouse drag for desktops. When swiping between slides the animation literally sticks at your fingertip or mouse cursor. Clicking fast on the previous and next navigation, will make animations even accelerate to keep up with your pace. All animations are hardware accelerated for a smoother performance.





Caption

To display a caption at the bottom of the lightbox, set the data-caption attribute on an anchor





Animations

By default, the Lightbox gallery uses a slide animation. You can set the animation option to use a different one. Possible values are slide, fade and scale.

Slide
Fade
Scale




Content sources

A lightbox is not restricted to images. Other media, like videos, can be displayed as well. The video will pause whenever it's not visible and resume once it becomes visible again. To display a poster image for a video, set the data-poster attribute.





Custom Attributes

You can add custom attributes to lightbox content items by using the data-attrs attribute. The attributes are passed like the usual component options, e.g. data-attrs="width: 1280; height: 720;"

modal

Create modal dialogs with different styles and transitions.

Open






Close button

To create a close button, enable its functionality and add proper styling and positioning, add the .uk-modal-close-default class to an <a> or <button> element. To place the close button outside the modal, add the .uk-modal-close-outside class.







To divide the modal into different content sections, use the following classes..

Open





Overflow

By default, the page will scroll with the modal, if its content exceeds the window height. To apply a scrollbar inside the modal, add the overflow-auto to the modal body.

Open

Notification

Create toggleable notifications that fade out automatically.







HTML message

You can use HTML inside your notification message, like an icon from the Icon component.

UIkit.notification("<span uk-icon='icon: check'></span> Message");






Position

You can use HTML inside your notification message, like an icon from the Icon component.

Off-canvas

Create an off-canvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations.

Open

Title

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.






Overlay

To add an overlay, blanking out the page, add the overlay: true parameter to the uk-offcanvas attribute.

Title

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.






Flip modifier

Add the flip: true parameter to the uk-offcanvas attribute to adjust its alignment, so that it slides in from the right.

Title

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.






Animation modes

By default, the off-canvas slides in. But you can actually choose between different animation modes for the off-canvas' entrance. Just add one of the following attributes.

Title

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.

Title

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.

Title

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.

Title

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.

Scrollspy

Trigger events and animations while scrolling your page.

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


This example uses the repeat: true option. Scroll up and down to see the triggered animations. The layout is made with the Card component.






Groups

You can also group scrollspy elements, so you won't have to apply the attribute to each of them. Just add the uk-scrollspy="target: SELECTOR" attribute to a container element, targeting the selector of the items you want to animate inside the container. When using a delay, it will be applied cumulatively to the items that scroll into view.

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.






Set cls option per target

You can also give each target a separate cls option. Just add the uk-scrollspy-class="CLASS" attribute to a target element. It will override the cls option set on the component.

Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sortable

Create sortable grids and lists to rearrange the order of its elements.


Drag and drop an element to a new location within the sortable grid, while the other items adjust to fit. This is great, if you want to sort items like gallery or menu items, for example.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8





Handle

By default, the entire sortable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the handle: SELECTOR option to the attribute and add the handle class to the element that you want to use as a handle

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6





Group

To be able to sort items from one list to another, you can group them by adding the group: GROUP-NAME option to the uk-sortable attribute on each list.

Group one

Item
Item
Item

Group two

Item
Item
Item

Group three

Item
Item
Item





Custom class

You can also apply one or more custom classes to items when they are being dragged. To do so, add the cls-custom: MY-CLASS option to the attribute.

General

Just simple test

23
Dec
2021
Designs

Just simple test

23
Dec
2021
Markups

Just simple test

23
Dec
2021
Comming soon

Just simple tast

23
Dec
2021

Tooltip

Easily create a nice looking tooltip.




Alignment

Add one of the following options to the uk-tooltip attribute to adjust the tooltip's alignment.

<button uk-tooltip="title: Hello World; pos: top-left"></button>
  • Top
  • Top Left
  • Top Right
  • Bottom
  • Bottom Left
  • Bottom Right
  • Left
  • Right



Delay

If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds.

Slider

Create a responsive carousel slider.


The Slider component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. It even accelerates to keep up with your pace when you click through previous and next navigation. All animations are hardware accelerated for a smoother performance.







Gap

To apply a gap to the slider items, use the Grid component and add the .uk-grid class to the slider. The elements will then be spaced according to the grid gap. You can use the modifiers like .uk-grid-small to change the gap.







Center

By default, items of the slider always are aligned to the left. To center the list items, just add uk-slider="center: true" to the attribute.







To navigate through your slides, just use the uk-slider-item attribute. To target the slides, set the attribute of every nav item to the index number of the respective slider item. The elements with the uk-slider-item attribute need to be inside the uk-slider container. Setting the attribute to next and previous will switch to the adjacent slides.

    Slideshow

    Create a responsive slideshow with images and videos.


    The Slideshow component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. When swiping between slides, the animation literally sticks at your fingertips or mouse cursor. It even accelerates to keep up with your pace when you click through previous and next navigation. All animations are hardware accelerated for a smoother performance.






    Animations

    By default, the slideshow uses a slide animation. You can set the animation option to use a different animation.

    Slide
    Fade
    Scale
    Pull
    Push





    Ken Burns effect

    To add a simple Ken Burns effect, wrap the image with a div and add the .uk-position-cover and .uk-animation-kenburns classes. You can also apply the .uk-animation-reverse or one of the .uk-transform-origin-* classes from the >Utility component to modify the effect.






    Content overlays

    Add content overlays using the Position component. It allows you to place the content anywhere inside the slide.

    • Overlay Bottom

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Center

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • Overlay Bottom Right

      Lorem ipsum dolor sit amet.