Upgrade

Explore

Development

Pages

Compounents

Advanced multi-part components with lots of possibilities .

  • Accordion

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

    Usage

    The Accordion component consists of a parent container with the uk-accordion attribute, and a title and content part for each accordion item.

    PREVIEW
    • 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.

    PREVIEW
    • 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.

    Advance Multiple open

    PREVIEW
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit?

      Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam. In sodales quam quis mi mollis eleifend id sit amet velit. Sed ultricies condimentum magna, vel commodo dolor luctus in. Aliquam et orci nibh. Nunc purus metus, aliquam vitae venenatis sit amet, porta non est. Proin vehicula nisi eu molestie varius. Pellentesque semper ex diam, at tristique ipsum varius sed. Pellentesque non metus ullamcorper, iaculis nibh quis, facilisis lorem. Sed malesuada eu lacus sit amet feugiat. Aenean iaculis dui sed quam consectetur elementum.

    • Nullam massa sem, mollis ut luctus at, tincidunt a lorem?
    • Aliquam pretium diam et ullamcorper malesuada?
    • Etiam suscipit at nisi eget auctor?
    • Sed porta diam eget enim bibendum laoreet?

  • Alert

    Display success, primary and error messages.

    Basic alert

    To apply this component, add the uk-alert attribute to a block element.

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

    To create a close button and enable its functionality, add the .uk-alert-close class to a <button> or <a> element inside the alert box. To apply a close icon, add the uk-close attribute .

    PREVIEW

    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
    .uk-alert-primary .uk-alert-success .uk-alert-primary .uk-alert-danger

    PREVIEW

    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.

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

    Backgrounds Gradient

    apply background Gradient color backgrounds Gradient .uk-light change text color to Light

    PREVIEW

    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.

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

    Gradient shadow

    apply Gradient shadow backgrounds Gradient

    PREVIEW

    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.

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

  • Dropdown

    Defines different styles for a toggleable dropdown.

    Basically, a dropdown is a specific case of the drop that provides its own styling. Any content, like a button, can toggle a dropdown. Just add the uk-dropdown attribute to a block element following the toggle.

    <button type="button"></button>
<div uk-dropdown></div>
    PREVIEW
    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.

    PREVIEW

    Grid in dropdown

    You can place a grid from the Grid page inside a dropdown, which can hold a navigation or any other content. Just wrap the content with a <div> element and add the uk-grid attribute. If the grid should stack automatically, whenever the dropdown no longer fits its container, just add the .uk-dropdown-grid class.

    PREVIEW

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

    PREVIEW
    Position Description
    bottom-left Aligns the dropdown to the bottom left.
    bottom-center Aligns the dropdown to the bottom center.
    bottom-right Aligns the dropdown to the bottom right.
    bottom-justify Aligns the dropdown to the bottom and justifies its width to the related element.
    top-left Aligns the dropdown to the top left.
    top-center Aligns the dropdown to the top center.
    top-right Aligns the dropdown to the top right.
    top-justify Aligns the dropdown to the top and justifies its width to the related element.
    left-top Aligns the dropdown to the left top.
    left-center Aligns the dropdown to the left center.
    left-bottom Aligns the dropdown to the left bottom.
    right-top Aligns the dropdown to the right top.
    right-center Aligns the dropdown to the right center.
    right-bottom Aligns the dropdown to the right bottom.

    Offset

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

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

    Animation

    Apply one or more animations to the dropdown by adding the animation: uk-animation-* option with one of the classes from the Animation component. You can also determine the animation's duration. Just add the duration option with your value.

    PREVIEW

  • Filter

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

    Usage

    To apply this component, you need a container element with the uk-filter="target: SELECTOR" attribute. Inside this container create a list of filter controls as well as the layout items you want to filter. Use the target: SELECTOR option to select the element containing the layout items.

    To apply a filter control, add the uk-filter-control attribute. To define the meta data that should be filtered, use the filter: SELECTOR option. The selector can be any CSS selector like a HTML class or an attribute you define for the layout items.

    If target is the only option in the uk-filter attribute value, you can also use uk-filter="SELECTOR". The same applies to the filter control. If filter is the only option in the uk-filter-control attribute value, you can also use uk-filter-control="SELECTOR".

    PREVIEW
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item

    The Filter component comes unstyled, which allows you to use any of the other UIkit components to create the filter controls and layout items. For example, the Tab components can be used to style the filter controls. Usually, the Grid component is used to create the item layout.

    Active state

    Add the .uk-active class to a filter control, and the filter will be applied initially.

    PREVIEW
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item

    Reset filter

    To reset the filter and target all items, use the uk-filter-control attribute without any specified selector.

    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • 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.

    PREVIEW
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item

    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.

    PREVIEW
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item

    Groups

    To filter items by multiple criteria at the same time, the filter controls need to be grouped. Just add the group: NAME option to the uk-filter-control attribute and define group names for the meta data.

    PREVIEW
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item

  • 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

    Usage

    To apply this component, add the uk-lightbox attribute to a container to turn all anchors inside that container into lightbox links.

    PREVIEW

    Caption

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

    PREVIEW

    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.

    PREVIEW

    Note Use youtube-nocookie.com within the YouTube link and the lightbox will use the domain to embed the YouTube video.

    Animation.

    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

  • Modal

    Create modal dialogs with different styles and transitions.

    The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the uk-toggle attribute. An <a> element needs to be linked to the modal's id. If you are using another element, like a button, just add the uk-toggle="target: #ID" attribute to target the id of the modal container.

    Add the uk-modal attribute to a <div> element to create the modal container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling. Use the following classes to define the modal's sections.

    PREVIEW
    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.

    Add the uk-close attribute from the Close component to apply a close icon.

    PREVIEW

    Center modal

    To vertically center the modal dialog, you can use the .uk-margin-auto-vertical class from the Margin component.

    Open

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

    Open

    Group modifiers.

    You can group multiple modals by linking from one to the other and back. Use this to create multistep wizards inside your modals.

    PREVIEW

    Modal 1 Modal 2

    Media.

    If you want to display media, you should first check, if the Lightbox component doesn't already offer everything you need. However, you can also use the modal to have more control over the markup to wrap your media in.

    Note Use the uk-video attribute from the Video component to make sure videos are stopped when the modal is closed.

    PREVIEW

    Image Video YouTube Vimeo

    Full modifier

    To create a modal, that fills the entire page, add the .uk-modal-full class. It is also recommended to add the .uk-modal-close-full class to the close button, so that it adapts its styling.

    Using the grid and width classes, you can create a nice, split fullscreen modal.

    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 .uk-overflow-auto attribute from the Utility component to the modal body.

    Open

  • Notification

    Create toggleable notifications that fade out automatically

    The notification will not fade out but remain visible when you hover the message until you stop hovering. You can also close the notification by clicking it.

    UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});

// Shortcuts
UIkit.notification('My message');
UIkit.notification('My message', status);
UIkit.notification('My message', { /* options */ });

    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");

    HTML message with image

    Position

    Add one of the following parameters to adjust the notification's position to different corners.

    Position Code
    top-left UIkit.notification("...", {pos: 'top-left'})
    top-center UIkit.notification("...", {pos: 'top-center'})
    top-right UIkit.notification("...", {pos: 'top-right'})
    bottom-left UIkit.notification("...", {pos: 'bottom-left'})
    bottom-center UIkit.notification("...", {pos: 'bottom-center'})
    bottom-right UIkit.notification("...", {pos: 'bottom-right'})


    style

    A notification can be styled by adding a status to the message to indicate a primary, success, primary or a danger status.

    Style Code
    primary UIkit.notification("...", {status:'primary'})
    success UIkit.notification("...", {status:'success'})
    primary UIkit.notification("...", {status:'primary'})
    danger UIkit.notification("...", {status:'danger'})

    Close all

    You can close all open notifications by calling UIkit.notification.closeAll().

  • Off canvas

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

    You can use any element to toggle an off-canvas sidebar. To enable the necessary JavaScript, add the uk-toggle attribute. An <a> element needs to be linked to the id of the off-canvas container. If you are using another element, like a button, just add the uk-toggle="target: #ID" attribute to target the id of the off-canvas container.

    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

    <div id="my-id" uk-offcanvas="mode: push">...</div>
    Parameter Description
    mode: slide The off-canvas slides out and overlays the content. This is the default mode.
    mode: push The off-canvas slides out and pushes the site.
    mode: reveal The off-canvas slides out and reveals its content while pushing the site.
    mode: none The off-canvas appears and overlays the content without an animation.

    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.

    Side nav

    You can use the Side nav inside an off-canvas to create a mobile navigation or Custom navigation

    Open

  • Scrollspy

    Trigger events and animations while scrolling your page.

    The Scrollspy component listens to page scrolling and trigger events based on the scroll position. For example, if you scroll down a page, and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element. Just add the uk-scrollspy attribute which takes the following options.

    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 

    <div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
<div></div>
<div></div>
</div>

    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.


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

    Set cls option per target 

    <div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
<div uk-scrollspy-class="uk-animation-slide-top"></div>
<div uk-scrollspy-class="uk-animation-slide-bottom"></div>
</div>

    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.

  • Tooltip

    Easily create a nice looking tooltip.

    To apply this component, add the uk-tooltip attribute to an element. You also need to add the title: TEXT option to the attribute, whose value will represent your tooltip's text 

    <div uk-tooltip="title: Hello World"></div>

    Alignment

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

    Attribute Description
    pos: top Aligns the tooltip to the top.
    pos: top-left Aligns the tooltip to the top left.
    pos: top-right Aligns the tooltip to the top right.
    pos: bottom Aligns the tooltip to the bottom.
    pos: bottom-left Aligns the tooltip to the bottom left.
    pos: bottom-right Aligns the tooltip to the bottom right.
    pos: left Aligns the tooltip to the left.
    pos: right Aligns the tooltip to the right.

    Delay

    To apply this component, add the uk-tooltip attribute to an element. You also need to add the title: TEXT option to the attribute, whose value will represent your tooltip's text 

    <button class="button uk-button-default" uk-tooltip="title: Hello World; delay: 500">Hover</button>

  • 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.

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

    Gutter

    To apply a gutter 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 gutter. You can use the modifiers like .uk-grid-small to change the gutter.

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

    Slider Center

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

    • 1

    • 2

    • 3

    • 4

    Note In this example, we add the .uk-width-1-2 or .uk-width-3-4 class to each item, which makes the slider look very similar to a slideshow.

    Slide Sets

    To loop through a set of slides instead ofSignle items, just add sets: true to the attribute.

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

    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.

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

      Note Since the slider effect needs a clipping container, box shadows of content items are also clipped. To get the best visual result, it's recommended to use the uk-slider="center: true" mode if your content items have a box shadow.

      Toggle on hover

      To toggle transitions on hover, use the .uk-transition-toggle class from the Transition component and tabindex="0". This will trigger the transition when the element is hovered or focused.

      • 1

      • 2

      • 3

      • 4

      • 5

      • 6

      • 7

      • 8

      • 9

      • 10

      • Slideshow

        Create a responsive slideshow with images and videos.

        To apply this component, add the uk-slideshow attribute to a container element and create a list of slides with the .uk-slideshow-items class.
        Add an image in the background of each slide using the uk-cover attribute from the Cover component

        Animations

        By default, the slideshow uses a slide animation. You can set the animation option to use a different animation. Possible values are as follows:

        Animation Description
        slide Slides slide in side by side.
        fade Slides fade in.
        scale Slides are scaled up and fade out.
        pull Slides are pulled from the deck.
        push Slides are pushed to the deck.
        Slide
        Fade
        Scale
        Pull
        Push

        Autoplay

        To activate autoplay, just add the autoplay: true option to the attribute. You can also set the interval in milliseconds between switching slides using autoplay-interval: 6000. To pause autoplay when hovering the slideshow, use pause-on-hover: true 

        <div uk-slideshow="autoplay: true">...</div>

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


          Note For better visibility of overlaying navigations, add the .uk-light or .uk-dark class from the Inverse component.

          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 parallax

          Add the uk-slideshow-parallax attribute to any element inside the slides to animate it together with the slideshow animation. Add an option with the desired animation values for each CSS property you want to animate. Define at least one start and end value. It can be done by passing two values separated by a comma.
          The parallax attribute can be used to add additional effects to the slideshow animations. In the following example the push animation is extended by dimming out and scaling down the image when it's sliding out.

          • Heading

            Lorem ipsum dolor sit amet.

          • Heading

            Lorem ipsum dolor sit amet.

          • Heading

            Lorem ipsum dolor sit amet.