-
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.
<ul uk-accordion> <li class="uk-open"> <a class="uk-accordion-title" href="#">Item 1</a> <div class="uk-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Item 2</a> <div class="uk-accordion-content"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Item 3</a> <div class="uk-accordion-content"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p> </div> </li> </ul>
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 theuk-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.
<ul uk-accordion="collapsible: false"> <li> <a class="uk-accordion-title" href="#">Item 1</a> <div class="uk-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Item 2</a> <div class="uk-accordion-content"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Item 3</a> <div class="uk-accordion-content"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p> </div> </li> </ul>
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 sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci. Pellentesque volutpat tellus sit amet enim rutrum, vel eleifend metus consectetur. Sed lacinia urna a neque maximus placerat. Praesent blandit hendrerit dui non placerat. Sed malesuada sem sit amet arcu faucibus, sit amet accumsan nisl laoreet. Quisque auctor sit amet nisl rhoncus interdum. Nullam euismod odio sem, quis pulvinar purus gravida eget. Nullam molestie, lacus vel vehicula elementum, massa arcu bibendum lacus, vitae tempus justo orci id lectus. Duis justo neque, elementum eget ante in, condimentum condimentum ante. Maecenas quis eleifend risus. In hac habitasse platea dictumst. Nunc posuere ultrices dolor, at auctor lacus dignissim ut. Donec viverra imperdiet nisi, sit amet mattis massa pellentesque ac.
-
Aliquam pretium diam et ullamcorper
malesuada?
Praesent feugiat lectus faucibus tellus congue pharetra. In viverra vehicula pellentesque. Etiam consectetur ultricies magna at bibendum. Sed posuere libero ut nulla ornare, faucibus pellentesque odio pulvinar. Vestibulum feugiat ex id ex elementum egestas. Integer laoreet mollis risus, id efficitur neque. Pellentesque quis dolor faucibus, ultrices tellus id, vestibulum neque. Sed eros purus, dignissim id fermentum ut, lacinia laoreet odio. Sed mi erat, aliquet at facilisis quis, laoreet in massa. Pellentesque eu massa accumsan, iaculis erat eu, tincidunt sem. Quisque id orci id dui congue pretium. Pellentesque iaculis, dolor aliquet tempor laoreet, enim metus tincidunt massa, ut porttitor sem dui sit amet arcu. Vestibulum sodales laoreet enim, sit amet vestibulum nisl porttitor a.
-
Etiam suscipit at nisi eget
auctor?
Mauris id pellentesque metus. In quis arcu sed enim maximus pellentesque et eget velit. Etiam euismod enim vitae condimentum tristique.
-
Sed porta diam eget enim bibendum
laoreet?
Donec molestie sem et tellus vestibulum venenatis. Quisque iaculis ornare luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi velit nibh, ullamcorper eu imperdiet id, rutrum quis mi. Donec eu aliquet lorem. Nulla at lectus turpis. Sed et diam ac lorem iaculis lacinia.
<article class="uk-card-default p-4 rounded"> <ul class="uk-list-divider uk-list-large uk-accordion" uk-accordion> <li> <a class="uk-accordion-title" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a> <div class="uk-accordion-content"> <p>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.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Nullam massa sem, mollis ut luctus at, tincidunt a lorem?</a> <div class="uk-accordion-content" hidden="" aria-hidden="true"> <p>Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci. Pellentesque volutpat tellus sit amet enim rutrum, vel eleifend metus consectetur. Sed lacinia urna a neque maximus placerat. Praesent blandit hendrerit dui non placerat. Sed malesuada sem sit amet arcu faucibus, sit amet accumsan nisl laoreet. Quisque auctor sit amet nisl rhoncus interdum. Nullam euismod odio sem, quis pulvinar purus gravida eget. Nullam molestie, lacus vel vehicula elementum, massa arcu bibendum lacus, vitae tempus justo orci id lectus. Duis justo neque, elementum eget ante in, condimentum condimentum ante. Maecenas quis eleifend risus. In hac habitasse platea dictumst. Nunc posuere ultrices dolor, at auctor lacus dignissim ut. Donec viverra imperdiet nisi, sit amet mattis massa pellentesque ac.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Aliquam pretium diam et ullamcorper malesuada?</a> <div class="uk-accordion-content" hidden="" aria-hidden="true"> <p>Praesent feugiat lectus faucibus tellus congue pharetra. In viverra vehicula pellentesque. Etiam consectetur ultricies magna at bibendum. Sed posuere libero ut nulla ornare, faucibus pellentesque odio pulvinar. Vestibulum feugiat ex id ex elementum egestas. Integer laoreet mollis risus, id efficitur neque. Pellentesque quis dolor faucibus, ultrices tellus id, vestibulum neque. Sed eros purus, dignissim id fermentum ut, lacinia laoreet odio. Sed mi erat, aliquet at facilisis quis, laoreet in massa. Pellentesque eu massa accumsan, iaculis erat eu, tincidunt sem. Quisque id orci id dui congue pretium. Pellentesque iaculis, dolor aliquet tempor laoreet, enim metus tincidunt massa, ut porttitor sem dui sit amet arcu. Vestibulum sodales laoreet enim, sit amet vestibulum nisl porttitor a.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Etiam suscipit at nisi eget auctor?</a> <div class="uk-accordion-content" hidden="" aria-hidden="true"> <p>Mauris id pellentesque metus. In quis arcu sed enim maximus pellentesque et eget velit. Etiam euismod enim vitae condimentum tristique.</p> </div> </li> <li> <a class="uk-accordion-title" href="#">Sed porta diam eget enim bibendum laoreet?</a> <div class="uk-accordion-content" hidden="" aria-hidden="true"> <p>Donec molestie sem et tellus vestibulum venenatis. Quisque iaculis ornare luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi velit nibh, ullamcorper eu imperdiet id, rutrum quis mi. Donec eu aliquet lorem. Nulla at lectus turpis. Sed et diam ac lorem iaculis lacinia.</p> </div> </li> </ul> </article>
-
Item 1
-
Alert
Display success, warning 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.<div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
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 theuk-close
attribute .PREVIEW
Notice
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div uk-alert> <a class="uk-alert-close" uk-close></a> <h3>Notice</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
Style modifiers
There are several style modifiers available
.uk-alert-primary
.uk-alert-success
.uk-alert-warning
.uk-alert-danger
PREVIEW
<div class="uk-alert-primary" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="uk-alert-success" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="uk-alert-warning" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="uk-alert-danger" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div>
Backgrounds Gradient
apply background Gradient color backgrounds Gradient
.uk-light
change text color to LightPREVIEW
<div class="bg-gradient-primary uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="bg-gradient-success uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="bg-gradient-warning uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="bg-gradient-danger uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div>
Gradient shadow
apply Gradient shadow backgrounds Gradient
PREVIEW
<div class="bg-gradient-primary shadow-primary uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="bg-gradient-success shadow-success uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="bg-gradient-warning shadow-warning uk-light" uk-alert> <a class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. </p> </div> <div class="bg-gradient-danger shadow-danger uk-light" uk-alert> <
-
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.<div class="uk-inline uk-display-inline-block"> <button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> </div> <div class="uk-inline uk-display-inline-block"> <button class="uk-button uk-button-default" type="button">Click</button> <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> </div>
Nav in dropdown
PREVIEW
<button class="uk-button uk-button-default dropdown-arrow" type="button">Hover</button> <div uk-dropdown> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div>
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 theuk-grid
attribute. If the grid should stack automatically, whenever the dropdown no longer fits its container, just add the.uk-dropdown-grid
class.PREVIEW
<button class="uk-button uk-button-default" type="button">Hover</button> <div class="uk-width-large" uk-dropdown> <div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div>
Position
Add one of the following options to the
uk-dropdown
attribute to adjust the dropdown's alignment.PREVIEW
<div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Top Right</button> <div uk-dropdown="pos: top-right"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Bottom Justify</button> <div uk-dropdown="pos: bottom-justify"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> <div class="uk-inline"> <button class="uk-button uk-button-default" type="button">Right Center</button> <div uk-dropdown="pos: right-center"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div>
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
<button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown="offset: 80"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div>
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 theduration
option with your value.PREVIEW
<button class="uk-button uk-button-default" type="button">Hover</button> <div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div>
-
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 thetarget: 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 thefilter: 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 theuk-filter
attribute value, you can also useuk-filter="SELECTOR"
. The same applies to the filter control. Iffilter
is the only option in theuk-filter-control
attribute value, you can also useuk-filter-control="SELECTOR"
.PREVIEW
<div uk-filter="target: .js-filter"> <ul class="uk-subnav uk-subnav-pill"> <li uk-filter-control=".tag-white"><a href="#">White</a></li> <li uk-filter-control=".tag-blue"><a href="#">Blue</a></li> <li uk-filter-control=".tag-black"><a href="#">Black</a></li> </ul> <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid> <li class="tag-white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li class="tag-blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li class="tag-white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li class="tag-white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li class="tag-black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li class="tag-black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li class="tag-blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li class="tag-black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li class="tag-blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li class="tag-white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li class="tag-blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li class="tag-black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> </ul> </div>
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
<div uk-filter="target: .js-filter"> <ul class="uk-subnav uk-subnav-pill"> <li class="uk-active" uk-filter-control="[data-color='white']"><a href="#">White</a></li> <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li> <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li> </ul> <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> </ul> </div>
Reset filter
To reset the filter and target all items, use the
uk-filter-control
attribute without any specified selector.<div uk-filter="target: .js-filter"> <ul class="uk-subnav uk-subnav-pill"> <li class="uk-active" uk-filter-control><a href="#">All</a></li> <li uk-filter-control="[data-color='white']"><a href="#">White</a></li> <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li> <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li> </ul> <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-color="blue"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-color="black"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> </ul> </div>
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 usesdata
attributes for the filter instead of HTML classes.PREVIEW
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<div uk-filter="target: .js-filter"> <ul class="uk-subnav uk-subnav-pill"> <li uk-filter-control="[data-tags*='white']"><a href="#">White</a></li> <li uk-filter-control="[data-tags*='blue']"><a href="#">Blue</a></li> <li uk-filter-control="[data-tags*='black']"><a href="#">Black</a></li> <li uk-filter-control="[data-tags*='dark']"><a href="#">Dark Colors</a></li> </ul> <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid> <li data-tags="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-tags="blue dark"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-tags="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-tags="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-tags="black dark"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-tags="black dark"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-tags="blue dark"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-tags="black dark"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> <li data-tags="blue dark"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-tags="white"> <div class="uk-card uk-card-default uk-card-body">Item</div> </li> <li data-tags="blue dark"> <div class="uk-card uk-card-primary uk-card-body">Item</div> </li> <li data-tags="black dark"> <div class="uk-card uk-card-secondary uk-card-body">Item</div> </li> </ul> </div>
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
<div uk-filter="target: .js-filter"> <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li class="uk-active" uk-filter-control><a href="#">All</a></li> </ul> </div> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li uk-filter-control="[data-color='white']"><a href="#">White</a></li> <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li> <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li> </ul> </div> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li uk-filter-control="[data-size='small']"><a href="#">Small</a></li> <li uk-filter-control="[data-size='medium']"><a href="#">Medium</a></li> <li uk-filter-control="[data-size='large']"><a href="#">Large</a></li> </ul> </div> </div> <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true"> <li data-color="white" data-size="large"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="small"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="white" data-size="medium"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="white" data-size="small"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="medium"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="small"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="medium"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="large"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="large"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="white" data-size="large"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="medium"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="small"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> </ul> </div>
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 theuk-filter-control
attribute and define group names for the meta data.PREVIEW
<div uk-filter="target: .js-filter"> <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li class="uk-active" uk-filter-control><a href="#">All</a></li> </ul> </div> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li uk-filter-control="filter: [data-color='white']; group: data-color"><a href="#">White</a></li> <li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Blue</a></li> <li uk-filter-control="filter: [data-color='black']; group: data-color"><a href="#">Black</a></li> </ul> </div> <div> <ul class="uk-subnav uk-subnav-pill" uk-margin> <li uk-filter-control="filter: [data-size='small']; group: size"><a href="#">Small</a></li> <li uk-filter-control="filter: [data-size='medium']; group: size"><a href="#">Medium</a></li> <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#">Large</a></li> </ul> </div> </div> <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true"> <li data-color="white" data-size="large"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="small"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="white" data-size="medium"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="white" data-size="small"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="medium"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="small"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="medium"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="large"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="large"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="white" data-size="large"> <div class="uk-card uk-card-default uk-card-body"> <canvas width="600" height="800"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="blue" data-size="medium"> <div class="uk-card uk-card-primary uk-card-body"> <canvas width="600" height="600"></canvas> <div class="uk-position-center">Item</div> </div> </li> <li data-color="black" data-size="small"> <div class="uk-card uk-card-secondary uk-card-body"> <canvas width="600" height="400"></canvas> <div class="uk-position-center">Item</div> </div> </li> </ul> </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
Usage
To apply this component, add the
uk-lightbox
attribute to a container to turn all anchors inside that container into lightbox links.PREVIEW
<div uk-lightbox> <a class="uk-button uk-button-default" href="images/photo.jpg">Open Lightbox</a> </div>
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
<div uk-lightbox> <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Image">Image</a> <a class="uk-button uk-button-default" href="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" data-caption="Video">Video</a> <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=YE7VzlLtp-4" data-caption="YouTube">YouTube</a> <a class="uk-button uk-button-default" href="https://vimeo.com/1084537" data-caption="Vimeo">Vimeo</a> <a class="uk-button uk-button-default" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Google Maps" data-type="iframe">Google Maps</a> </div>
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 areslide
,fade
andscale
.SlideFadeScale<div class="uk-h3">Slide</div> <div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide"> <div> <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1"> <img src="images/photo.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2"> <img src="images/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3"> <img src="images/light.jpg" alt=""> </a> </div> </div> <div class="uk-h3">Fade</div> <div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade"> <div> <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1"> <img src="images/photo.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2"> <img src="images/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3"> <img src="images/light.jpg" alt=""> </a> </div> </div> <div class="uk-h3">Scale</div> <div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: scale"> <div> <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1"> <img src="images/photo.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2"> <img src="images/dark.jpg" alt=""> </a> </div> <div> <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3"> <img src="images/light.jpg" alt=""> </a> </div> </div>
-
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 theuk-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 anid
to indicate the element for toggling. Use the following classes to define the modal's sections.PREVIEW
OpenHeadline
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.
<!-- This is a button toggling the modal --> <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-example">Open</button> <!-- This is an anchor toggling the modal --> <a href="#modal-example" uk-toggle>Open</a> <!-- This is the modal --> <div id="modal-example" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <h2 class="uk-modal-title">Headline</h2> <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 class="uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-primary" type="button">Save</button> </p> </div> </div>
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
Default
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.
Outside
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.
<!-- This is a button toggling the modal with the default close button --> <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">Default</button> <!-- This is the modal with the default close button --> <div id="modal-close-default" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2 class="uk-modal-title">Default</h2> <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> <!-- This is a button toggling the modal with the outside close button --> <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-outside">Outside</button> <!-- This is the modal with the outside close button --> <div id="modal-close-outside" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-outside" type="button" uk-close></button> <h2 class="uk-modal-title">Outside</h2> <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>
Center modal
To vertically center the modal dialog, you can use the
Open.uk-margin-auto-vertical
class from the Margin component.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.
<a class="uk-button uk-button-default" href="#modal-center" uk-toggle>Open</a> <div id="modal-center" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"> <button class="uk-modal-close-default" type="button" uk-close></button> <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>
Header and footer
To divide the modal into different content sections, use the following classes.
OpenModal 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. 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.
<a class="uk-button uk-button-default" href="#modal-sections" uk-toggle>Open</a> <div id="modal-sections" 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">Modal Title</h2> </div> <div class="uk-modal-body"> <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-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-primary" type="button">Save</button> </div> </div> </div>
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
Headline 1
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.
Headline 2
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 uk-margin> <a class="uk-button uk-button-default" href="#modal-group-1" uk-toggle>Modal 1</a> <a class="uk-button uk-button-default" href="#modal-group-2" uk-toggle>Modal 2</a> </p> <div id="modal-group-1" 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 1</h2> </div> <div class="uk-modal-body"> <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-button uk-button-default uk-modal-close" type="button">Cancel</button> <a href="#modal-group-2" class="uk-button uk-button-primary" uk-toggle>Next</a> </div> </div> </div> <div id="modal-group-2" 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 2</h2> </div> <div class="uk-modal-body"> <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-button uk-button-default uk-modal-close" type="button">Cancel</button> <a href="#modal-group-1" class="uk-button uk-button-primary" uk-toggle>Previous</a> </div> </div> </div>
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
<p uk-margin> <a class="uk-button uk-button-default" href="#modal-media-image" uk-toggle>Image</a> <a class="uk-button uk-button-default" href="#modal-media-video" uk-toggle>Video</a> <a class="uk-button uk-button-default" href="#modal-media-youtube" uk-toggle>YouTube</a> <a class="uk-button uk-button-default" href="#modal-media-vimeo" uk-toggle>Vimeo</a> </p> <div id="modal-media-image" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <img src="images/photo.jpg" alt=""> </div> </div> <div id="modal-media-video" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <video controls playsinline uk-video> <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg"> </video> </div> </div> <div id="modal-media-youtube" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4" width="560" height="315" frameborder="0" uk-video></iframe> </div> </div> <div id="modal-media-vimeo" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" frameborder="0" uk-video></iframe> </div> </div>
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.
OpenHeadline
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.
<a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Open</a> <div id="modal-full" class="uk-modal-full" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button> <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid> <div class="uk-background-cover" style="background-image: url('images/photo.jpg');" uk-height-viewport></div> <div class="uk-padding-large"> <h1>Headline</h1> <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> </div> </div>
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
Open.uk-overflow-auto
attribute from the Utility component to the modal body.Headline
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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-button uk-button-default uk-modal-close" type="button">Cancel</button> <button class="uk-button uk-button-primary" type="button">Save</button> </div> </div> </div>
-
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, warning or a danger status.
Style Code primary
UIkit.notification("...", {status:'primary'})
success
UIkit.notification("...", {status:'success'})
warning
UIkit.notification("...", {status:'warning'})
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
Openuk-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 theuk-toggle="target: #ID"
attribute to target the id of the off-canvas container.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.
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-usage">Open</button> <a href="#offcanvas-usage" uk-toggle>Open</a> <div id="offcanvas-usage" uk-offcanvas> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div>
Overlay
To add an overlay, blanking out the page, add the
overlay: true
parameter to theuk-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.
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-overlay">Open</button> <div id="offcanvas-overlay" uk-offcanvas="overlay: true"> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div>
Flip modifier
Add the
flip: true
parameter to theuk-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.
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-flip">Open</button> <div id="offcanvas-flip" uk-offcanvas="flip: true; overlay: true"> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div>
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.
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-slide">Slide</button> <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-push">Push</button> <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-reveal">Reveal</button> <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-none">None</button> <div id="offcanvas-slide" uk-offcanvas="overlay: true"> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div> <div id="offcanvas-push" uk-offcanvas="mode: push; overlay: true"> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div> <div id="offcanvas-reveal" uk-offcanvas="mode: reveal; overlay: true"> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div> <div id="offcanvas-none" uk-offcanvas="mode: none; overlay: true"> <div class="uk-offcanvas-bar"> <button class="uk-offcanvas-close" type="button" uk-close></button> <h3>Title</h3> <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.</p> </div> </div>
Side nav
You can use the Side nav inside an off-canvas to create a mobile navigation or Custom navigation
Open<div class="uk-child-width-1-3@s uk-text-center" uk-grid> <a href="#offcanvas-navigation" uk-toggle>Open</a> <div id="offcanvas-navigation" uk-offcanvas> <div class="uk-offcanvas-bar bg-primary uk-padding-remove"> <button class="uk-offcanvas-close uk-icon-button" type="button" uk-close></button> <div class="side-nav"> <div class="side-nav-title"> Main Navigation </div> <ul> <li> <a href="#"> <i class="far fa-home"></i> Homepage</a></li> <li> <a href="#"> <i class="far fa-shopping-cart"></i> Shop</a></li> <li> <a href="#"> <i class="far fa-file"></i> Pages</a></li> <li> <a href="#"> <i class="far fa-file-alt"></i> Blog</a></li> <li> <a href="#"> <i class="far fa-map"></i> Contact</a></li> <li> <a href="#"> <i class="far fa-comment-alt"></i> help</a></li> </ul> </div> </div> </div>
-
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.
<div class="uk-child-width-1-2@m uk-grid-match" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: true"> <h3 class="uk-card-title">Left</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true"> <h3 class="uk-card-title">Right</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div>
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.
<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 500; repeat: true"> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Fade</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div>
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 theuk-scrollspy-class="CLASS"
attribute to a target element. It will override thecls
option set on the componentBottom
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.
<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true"> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Bottom</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top"> <h3 class="uk-card-title">Top</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Bottom</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div>
-
Sortable
Create sortable grids and lists to rearrange the order of its elements.
To apply this component, add the
uk-sortable
attribute to a container and create child elements.<div uk-sortable> <div></div> <div></div> </div>
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Item 7
-
Item 8
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-sortable="handle: .uk-card" uk-grid> <li> <div class="uk-card uk-card-default uk-card-body">Item 1</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 2</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 3</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 4</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 5</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 6</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 7</div> </li> <li> <div class="uk-card uk-card-default uk-card-body">Item 8</div> </li> </ul>
Handle
<ul uk-sortable="handle: .uk-sortable-handle"> <li> <div class="uk-sortable-handle"></div> ... </li> </ul>
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
-
Item 7
-
Item 8
<ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 1 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 2 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 3 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 4 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 5 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 6 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 7 </div> </li> <li> <div class="uk-card uk-card-default uk-card-body"> <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Item 8 </div> </li> </ul>
Group
<div uk-sortable="group: my-group"> <div></div> </div> <div uk-sortable="group: my-group"> <div></div> </div>
To be able to sort items from one list to another, you can group them by adding the
group: GROUP-NAME
option to theuk-sortable
attribute on each list.Group 1
Item 1Item 2Item 3Item 4Group 2
Item 1Item 2Item 3Item 4Empty Group
Item 1<div class="uk-child-width-1-3@s" uk-grid> <div> <h4>Group 1</h4> <div uk-sortable="group: sortable-group"> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div> </div> </div> </div> <div> <h4>Group 2</h4> <div uk-sortable="group: sortable-group"> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div> </div> <div class="uk-margin"> <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div> </div> </div> </div> <div> <h4>Empty Group</h4> <div uk-sortable="group: sortable-group"> </div> </div>
-
-
Tooltip
Easily create a nice looking tooltip.
To apply this component, add the
uk-tooltip
attribute to an element. You also need to add thetitle: TEXT
option to the attribute, whose value will represent your tooltip's text<div uk-tooltip="title: Hello World"></div>
<button class="uk-button uk-button-default" uk-tooltip="Hello World">Hover</button>
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. <p uk-margin> <button class="uk-button uk-button-default" uk-tooltip="Hello World">Top</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-left">Top Left</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-right">Top Right</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom">Bottom</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom-left">Bottom Left</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom-right">Bottom Right</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: left">Left</button> <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: right">Right</button> </p>
Delay
To apply this component, add the
uk-tooltip
attribute to an element. You also need to add thetitle: TEXT
option to the attribute, whose value will represent your tooltip's text<button class="uk-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.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <li> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>1</h1></div> </li> <li> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>2</h1></div> </li> <li> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>3</h1></div> </li> <li> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>4</h1></div> </li> <li> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>5</h1></div> </li> <li> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>6</h1></div> </li> <li> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>7</h1></div> </li> <li> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>8</h1></div> </li> <li> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>9</h1></div> </li> <li> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>10</h1></div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a> </div>
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.<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid"> <li> <div class="uk-panel"> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>1</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>2</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>3</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>4</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>5</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>6</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>7</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>8</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>9</h1></div> </div> </li> <li> <div class="uk-panel"> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>10</h1></div> </div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a> </div>
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"
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true"> <ul class="uk-slider-items uk-grid"> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="images/photo.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>1</h1></div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="images/dark.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>2</h1></div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="images/light.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>3</h1></div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="images/photo2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>4</h1></div> </div> </li> <li class="uk-width-3-4"> <div class="uk-panel"> <img src="images/photo3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>5</h1></div> </div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a> </div>
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 of single items, just add
sets: true
to the attribute.<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="sets: true"> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m"> <li> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>1</h1></div> </li> <li> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>2</h1></div> </li> <li> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>3</h1></div> </li> <li> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>4</h1></div> </li> <li> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>5</h1></div> </li> <li> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>6</h1></div> </li> <li> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>7</h1></div> </li> <li> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>8</h1></div> </li> <li> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>9</h1></div> </li> <li> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>10</h1></div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a> </div>
Navigation
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 theuk-slider-item
attribute need to be inside theuk-slider
container. Setting the attribute tonext
andprevious
will switch to the adjacent slides.<div uk-slider> <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <li> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>1</h1></div> </li> <li> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>2</h1></div> </li> <li> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>3</h1></div> </li> <li> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>4</h1></div> </li> <li> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>5</h1></div> </li> <li> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>6</h1></div> </li> <li> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>7</h1></div> </li> <li> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>8</h1></div> </li> <li> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>9</h1></div> </li> <li> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1>10</h1></div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a> </div> <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul> </div>
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 andtabindex="0"
. This will trigger the transition when the element is hovered or focused.-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
<div uk-slider> <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-light"> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider1.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider2.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider3.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider4.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div> </li> <li class="uk-transition-toggle" tabindex="0"> <img src="images/slider5.jpg" alt=""> <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div> </li> </ul> <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul> </div>
-
-
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 theuk-cover
attribute from the Cover component<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow> <ul class="uk-slideshow-items"> <li> <img src="images/photo.jpg" alt="" uk-cover> </li> <li> <img src="images/dark.jpg" alt="" uk-cover> </li> <li> <img src="images/light.jpg" alt="" uk-cover> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div>
Animations
By default, the slideshow uses a
slide
animation. You can set theanimation
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. Autoplay
To activate autoplay, just add the
autoplay: true
option to the attribute. You can also set the interval in milliseconds between switching slides usingautoplay-interval: 6000
. To pause autoplay when hovering the slideshow, usepause-on-hover: true
<div uk-slideshow="autoplay: true">...</div>
Navigation
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 theuk-slideshow-item
attribute need to be inside theuk-slideshow
container. Setting the attribute tonext
andprevious
will switch to the adjacent slides.<div uk-slideshow="animation: push"> <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"> <ul class="uk-slideshow-items"> <li> <img src="images/photo.jpg" alt="" uk-cover> </li> <li> <img src="images/dark.jpg" alt="" uk-cover> </li> <li> <img src="images/light.jpg" alt="" uk-cover> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div> <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul> </div>
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.<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push"> <ul class="uk-slideshow-items"> <li> <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center-left"> <img src="images/photo.jpg" alt="" uk-cover> </div> </li> <li> <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-right"> <img src="images/dark.jpg" alt="" uk-cover> </div> </li> <li> <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-bottom-left"> <img src="images/light.jpg" alt="" uk-cover> </div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div>
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 thepush
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.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: push"> <ul class="uk-slideshow-items"> <li> <img src="images/photo.jpg" alt="" uk-cover> <div class="uk-position-center uk-position-small uk-text-center"> <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2> <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p> </div> </li> <li> <img src="images/dark.jpg" alt="" uk-cover> <div class="uk-position-center uk-position-small uk-text-center"> <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2> <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p> </div> </li> <li> <img src="images/light.jpg" alt="" uk-cover> <div class="uk-position-center uk-position-small uk-text-center"> <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2> <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p> </div> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div>
-