<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float;" href="/images/demo/sample_big.jpg" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>
You can use it in a gallery
markup
<a data-lightbox="transitionIn:elastic; transitionOut:elastic; titlePosition:float; group:gallery1" href="/images/demo/sample_big.jpg" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>
Various examples in one gallery (try also using the keyboard and mouse scroll wheel)
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Load Widgets In A Lightbox
Use #wk-ID to load widgets like slideshows or galleries in a lightbox. For example: Widgetkit Slideshow
Use the HTML5 custom data attribute data-lightbox to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:
titlePosition - How should the title show up? (float, outside, inside or over)
transitionIn - Set a opening transition. (fade, elastic, or none)
transitionOut - Set a closing transition (fade, elastic, or none)
overlayShow - Set to true or false
scrolling - Set to yes or no
width - Set a width in pixel
height - Set a height in pixel
padding - Set a padding in pixel
The Widgetkit Slideshow is the ultimate image and content slideshow for Joomla and WordPress. It's flexible, easy to customize and completely build with HTML5 and CSS3.
Features
Clean and very lightweight code
17 eye-catching transition effects
Uses hardware accelerated CSS3 animations
JavaScript animation fallback for all Internet Explorers
Support for HTML captions
Swipe navigation on mobile phones
Built with HTML5, CSS3, PHP 5.2+, and the latest jQuery version
Works with Joomla and WordPress
Slideshow Example
This is an image slideshow with eye-catching transition effects.
The Widgetkit Slideshow takes full advantage of the very user-friendly Widgetkit administration user interface. It has never been easier to create and manage all the slideshows and their different slides in one place. After you created a slideshow you can load it anywhere in your theme using shortcodes or the universal Widgetkit Joomla module or WordPress widget.
The Widgetkit Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. The default magnifier spotlight is a perfect match to be used with a lightbox.
Features
Create nicely animated image overlays
Supports custom image or HTML content overlays
5 different animation modes
Build on the latest jQuery version
Works with Joomla and WordPress
Examples
If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations - fade, bottom, top, right and left.
You can set a pricing table to have focus by using the focus option in the table-config attribute. You can further shift the focus pricing table upwards to create symmetry by using the tm-shift-top option. Notice also how the focused table has more items to make it larger and thus fitting with the shift.
You can use the uk-text-success class and uk-text-danger class to change the color of the icons
To add a line beneath a heading, use the uk-module-title style. Example:
Your title goes here
markup
[heading size="h3" style="uk-module-title"]Your title goes here[/heading]
Column Blocks
Column grid is a robust layout that is both responsive and nestable. It can accomodate upto 10 columns by using pre-defined widths. The columns are fully responsive in all devices. The following table shows an overview of the shortcode sizes you can use to create columns:
Class
Description
[column size="1-1"]
Fills 100% of the available width.
[column size="1-2"]
Divides the grid into halves.
[column size="1-3"] to [column size="2-3"]
Divides the grid into thirds.
[column size="1-4"] to [column size="3-4"]
Divides the grid into fourths.
[column size="1-5"] to [column size="4-5"]
Divides the grid into fifths.
[column size="1-6"] to [column size="5-6"]
Divides the grid into sixths.
[column size="1-10"] to [column size="9-10"]
Divides the grid into tenths.
Examples
One half
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One half
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One third
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One third
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One third
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Two tenth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
five tenth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.
Three tenth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
markup
[grid]
[column size="1-3"]
your content here
[/column]
[column size="1-3"]
your content here
[/column]
[column size="1-3"]
your content here
[/column]
[/grid]
note
To add a nested grid (grid within a grid,) use the [child_grid] shortcode
markup
[grid]
[child_grid]
...
[/child_grid]
[/grid]
Blocks
Blocks are distinct ways of enumarating points in paragraphs with numbers, dates or icons. For block-numbers, you can use any numbering or alphabetical format.
Block numbers
1
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
2
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
3
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
4
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
5
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
6
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
To view a list of available icons that you can use in block icons, click here.
Blockquotes
Blockquotes are a nice way to show some commentary or slogan accompanied by the author or name of the commenter. To create a standard blockquote, use the [blockquote] shortcode. Inline quotations can also be defined by using the <q> element.
Blockquote example
Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality. Let things flow naturally
John Doe
markup
[blockquote author="author_name"]
your quote goes here
[/blockquote]
The [testimonial] shortcode adds an avatar and icon attribute to the native blockquote. avatar attribute shows an image of the author by specifying a url to the image. icon attribute is used to add a transparent icon that is positioned bottom left.
Testimonial example
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
John Doe
Head of Sales, envato
markup
[testimonial author="author name" title="author's title" avatar="url-path-to-avatar" icon="icon"]
your quote goes here
[/testimonial]
important
You can omit any of the parameters of testimonial (author, title) but not the 'avatar' parameter. If you'd like to use the testimonial without the avatar, use the blockquote shortcode instead
Inline code
To define a short inline computer code use the <code> element. For a larger code snippet use the <pre> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.
You can add different size classes to your button to create button size variation using the size classes uk-button-mini, uk-button=small or uk-button-large
Dropdowns are a creative way to provide more options on a click or hover element. With Uikit dropdown component, you can attach the dropdown to couple of elements to enrich your UI composition.
Button with dropdowns
To create a button dropdown, wrap the [dropdown] shortcode around a button that you'd like to add a dropdown menu, then add the dropdowm markup right after the button. Additionally, you can add an arrow icon using the [icon] shortcode to depict a dropdown menu.
To create a large alert with added padding, use the uk-alert-large style in the alert shortcode.
We are because of you
All of all our customers are happy with our current and upcoming projects. The other 5% are learning the secret of appreciating good stuff. It is possible for you to do whatever you choose, if you first get to know who you are
markup
[alert close-button style="success uk-alert-large"]
[heading size="h3" style="uk-module-title"]We are because of you[/heading]
<p>All of all our customers are happy with our current and upcoming projects. The other 5% are learning the secret of appreciating good stuff. It is possible for you to do whatever you choose, if you first get to know who you are</p>
[/alert]
Panels
Use the panel shortcode to create panels
Panel Title
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Panel Title
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Panel Title
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
markup
[panel]
[heading size="h3"]Panel Title[/heading]
Your content here
[/panel]
important
In each of these examples, we've nested the panel code within the column grids.
Style modifiers
You can add style modifiers uk-panel-box-primary and uk-panel-box-secondary to change the visual appearance of the panel. You can also add the uk-panel-title to the heading to adapt the heading styling to the panel.
Primary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Secondary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
markup
[panel style="uk-panel-box-primary"]
[heading size="h3" style="uk-panel-title"]Panel Title[/heading]
Your content here
[/panel]
Panel title with Icons
You can also add icons to the panels by using the [icon] shortcode right next to the header.
Primary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Secondary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
markup
[panel style="uk-panel-box-primary"]
[heading size="h3" style="uk-panel-title"][icon style="icon-envelope-o"/] Panel Title[/heading]
Your content here
[/panel]
Using panels to define person's biodata
A pretty neat way of using panels is creating biodata for a person e.g for company staff. You can use the [person] shortcode to create a panel that gives you the option to add the person's name, the title and the person's avatar.
Charles Finney
Founder
Change will not come if we wait for some other person or some other time
Linda Russ
Head of Marketing
Change will not come if we wait for some other person or some other time
George Freeby
Head of ICT
Change will not come if we wait for some other person or some other time
George Freeby
Head of ICT
Change will not come if we wait for some other person or some other time
markup
[person name="George Freeby" title="Head of ICT" avatar="images/demo/avatar/client-1.png"]
<p>Change will not come if we wait for some other person or some other time</p>
<br/>
<div class="uk-text-right">
[icon_button icon="icon-pinterest" url="#" target="_self"][/icon_button]
[icon_button icon="icon-linkedin" url="#" target="_self"][/icon_button]
[icon_button icon="icon-facebook" url="#" target="_self"][/icon_button]
</div>
[/person]
Badges
You can use badges to highlight a segment of text within your content by using the [badge] shortcode
new
legend
note
markup
[badge]new[/badge]
Color variations
You can change the color scheme of the badge by adding the following styles: note, success, warning, or danger. You can also use the uk-badge-notification to have a rounded badge, normally used with numbering.
To hide or show text in a retractable panel, use the [toggle] shortcode. A good example of how the toggles can be used is in createing a Frequently Asked Question section by using multiple toggles. To have the toggle open on page load, set the state option to open; To have the toggle closed by default, set the state option to closed
open toggle
How can I find happiness?
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
markup
[toggle state="open" title="Your toggle title here"]Your toggle content here[/toggle]
closed toggle
How can I find happiness?
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
markup
[toggle state="closed" title="Your toggle title here"]Your toggle content here[/toggle]
Toggle with code
You can also use the toggles to show/hide code snippets by adding the code state to the toggle
show code
<ul> <li class="uk-nav-header uk-navbar-nav-subtitle">Menu Heading<div>Subtitle possible</div></li> <li><a href="#">[icon style="icon-envelope-o"/] Menu Icon</a></li> <li><a href="#">[icon style="icon-heart-o"/] Another Menu item</a></li> <li class="uk-nav-divider"></li> </ul>
markup
[toggle state="closed code" title="Your toggle title here"]Your toggle code here[/toggle]
Tooltips
Tooltips are snippets that provide more information on hover. They can be added to any element by adding the data-uk-tooltip attribute and specifying the title in the same element.
Use the [progress] shortcode to create a progress bar in your content. The progress bar width is defined by the width option. The following options can be used in the style parameter:
To create a set of tabs, use the [tab] shortcode. Uikit tabs fit nicely in responsive layouts by converting the tabs into a dropdown menu. The tabs also scale to fit its contents by adjusting the tab height automatically.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the second tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the third tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
Vertical tabs use a combination of [tab_grid], [column] and [tab] shortcodes. The [tab_grid] shortcode is used to define the tab container; the [column] shortcode is used to define the widths of the tabs and content; the [tab] shortcode creates the tab elements.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the second tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the third tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This section doesn't use shortcodes but rather, it uses basic html. In that case you'll need to toggle the editor view (if you are using editors like TinyMCE) to html mode to be able to create your table.
To create clean formatted tables using uikit style, add the uk-table class to a table. The table rows will be separated by lines.
You can view more examples and classes that you can use from here
Modal Box
Use the [modal_box] shortcode to show a popup box with overlay. The [modal_box] shortcode can also be linked with these module positions: modal-a, modal-b and modal-c. By using one of these positions as your target, the modal box will show a popup of the modules that have be placed in these positions and assigned to the corresponding menu.
target
Description
modal-a
show modal box for modules in modal-a position
modal-b
show modal box for modules in modal-b position
modal-c
show modal box for modules in modal-c position
For each module linked to modal-a, modal-b or modal-c, you can use Module Class Suffix to style it just like a normal module. The target parameter can also be the id of a content section.
Size modifier
To adjust the size (width) of the modal box, add modal-small or modal-large to the Module Class Suffix of the module.
[modal_box link target="modal-a"]modal-a[/modal_box]
[modal_box link target="modal-b"]modal-b[/modal_box]
[modal_box link target="modal-c"]modal-c[/modal_box]
The [modal_box] shortcode can also be used for inline content by using the following sytnax:
markup
<!-- create a link that will trigger the pop-up modal box -->
[modal_box link target="mycontent"]my link[/modal_box]
<!-- create the content of the modal box -->
[modal_box content target="mycontent" style="uk-panel-box-primary"]
...
[/modal_box]
Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too. Be kind whenever possible. It is always possible.
Audio
To create an audio player, use the [audio] shortcode
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
