Button

To apply this component, add the .uk-button class and a modifier such as .uk-button-default to an <a> or <button> element. Add the disabled attribute to a <button> element to disable the button.

Lightbox

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.

Shortcodes

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.

Alert

To apply this component, add the uk-alert attribute to a block 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.

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.

Table

Easily create nice looking tables, which come in different styles.

Table Caption
Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data

Tab

The tab component consists of clickable tabs, that are aligned side by side in a list. Its JavaScript functionality extends the Switcher component and is necessary to dynamically transition through different contents using the tabbed navigation.

List

To apply this component, add the .uk-list class to an unordered or ordered list. The list will now display without any spacing or list-style.

  • List item 1
  • List item 2
  • List item 3

Label

To create a label, just add the .uk-label class to a element.

Default Success Warning Danger

Animation

Add one of the .uk-animation-* classes to any element. The animation is shown when the class is added, so usually immediately on page load. To show the animation at another point, for example when the element enters the viewport, you would add the class using JavaScript — with the Scrollspy component for instance. This is what happens in many of UIkit's components that make use of animations. All animations themselves are implemented with CSS, so they do not require JavaScript to play.

Fade

Scale Up

Scale Down

Shake

Left

Top

Bottom

Right

Left Small

Top Small

Bottom Small

Right Small

Left Medium

Top Medium

Bottom Medium

Right Medium