Latest blog posts

Light & Dark Skins

This theme is built in with color choosers that does a pretty job in helping you create your own skins. The template settings can be used to create both dark and light skins without loosing the elements color matching.


light color
dark color

Live Customizer

This theme is built on Warp 7 framework to give you the best experience in building your site. The theme comes with a live color customizer to help you see what colors you are editing and make customization a breeze

live customizer

Color Styles

This theme comes packed with 6 style presets. The template settings also allows you to create an unlimited color styles using the color pickers and pre-defined background settings. Check out the Live Customizer to see available options in the template backend.


saffron
valencia
blue


orange
tacha
alpine

Portfolio Category

This project was done by John Doe on themeforest and cost him $35. All the work was done in under 2 months and completed on time and within the stipulated budget guidelines


Eeiusmod tempor

Pellentesque adipiscing odio eu neque gravida vehicula. Ut ultricies diam vel est convallis non auctor dui scelerisque. Quisque at erat sem

portfolio

portfolio

portfolio


This project was done by Jane Doe on codecanyon and cost him $6. All the work was done in under 4 days and completed on time and within the stipulated budget guidelines


Adipisicing elite

Pellentesque adipiscing odio eu neque gravida vehicula. Ut ultricies diam vel est convallis non auctor dui scelerisque. Quisque at erat sem

portfolio

portfolio

portfolio


"This project was done by Henry Doe on photodune and cost him roughly $1. All the work was done in under 1 year and completed on time and within the stipulated budget guidelines


Labore et dolore

Pellentesque adipiscing odio eu neque gravida vehicula. Ut ultricies diam vel est convallis non auctor dui scelerisque. Quisque at erat sem

portfolio

portfolio

portfolio


  • show code

    [blockquote author=""] <p>This project was done by<strong> Jane Doe</strong> on <abbr data-uk-tooltip title="an amazing marketplace where you can get cool scripts">codecanyon</abbr> and cost him <strong>$6</strong>. All the work was done in under<strong> 4 days</strong> and completed on time and within the stipulated budget guidelines</p> <p>[/blockquote]</p> <hr /> [grid] [column size="1-4"] [heading size="h3" style="uk-module-title"]Adipisicing elite[/heading] <p>Pellentesque adipiscing odio eu neque gravida vehicula. Ut ultricies diam vel est convallis non auctor dui scelerisque. Quisque at erat sem</p> [/column] [column size="1-4"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery2" href="/images/demo/gallery/column_4/4_big.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-spotlight="on"><img src="/images/demo/gallery/column_4/4.jpg" alt="portfolio" width="275" height="182" /></a></p> [/column] [column size="1-4"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery2" href="/images/demo/gallery/column_4/5_big.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-spotlight="on"><img src="/images/demo/gallery/column_4/5.jpg" alt="portfolio" width="275" height="182" /></a></p> [/column] [column size="1-4"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery2" href="/images/demo/gallery/column_4/6_big.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-spotlight="on"><img src="/images/demo/gallery/column_4/6.jpg" alt="portfolio" width="275" height="182" /></a></p> [/column] [/grid]

Portfolio in Blocks

Consectetur adipisicing elit

gallery

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

Learn more

Eeiusmod tempor

gallery

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

Learn more

Adipisicing elite

gallery

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

Learn more

Tonsectetur adipisicing

gallery

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

Learn more

Labore et dolore

gallery

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

Learn more

Dolor sit amet

gallery

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

Learn more

  • show code

    [grid] [column size="1-3"] [heading size="h3" style="uk-module-title"]Your title[/heading] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_3/1_big.jpg" title="your caption here" data-spotlight="on"><img src="/images/demo/gallery/column_3/1.jpg" alt="gallery" width="383" height="253" /></a></p> <p>Your content here</p> [button style="color uk-float-right" href="#" target="_self"]Learn more[/button] [/column] [column size="1-3"] [heading size="h3" style="uk-module-title"]Your title[/heading] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_3/2_big.jpg" title="your caption here" data-spotlight="on"><img src="/images/demo/gallery/column_3/2.jpg" alt="gallery" width="383" height="253" /></a></p> <p>Your content here</p> [button style="color uk-float-right" href="#" target="_self"]Learn more[/button] [/column] [column size="1-3"] [heading size="h3" style="uk-module-title"]Your title[/heading] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_3/3_big.jpg" title="your caption here" data-spotlight="on"><img src="/images/demo/gallery/column_3/3.jpg" alt="gallery" width="383" height="253" /></a></p> <p>Your content here</p> [button style="color uk-float-right" href="#" target="_self"]Learn more[/button] [/column] [/grid]

Video portfolio

Be kind whenever possible

Make that idea your life


Inspiration comes from within

Videohive comes to life


  • show code

    [grid] [column size="1-2"] <h3>Be kind whenever possible</h3> [video width="600" height="294" poster="/images/demo/video/movie_bg.jpg"] [source type="video/mp4" url="images/demo/video/envato_sting.mp4"][/source] [source type="video/ogg" url="images/demo/video/envato_sting.ogv"][/source] [source type="video/webm" url="images/demo/video/envato_sting.webm"][/source] [/video] [/column] [column size="1-2"] <h3>Make that idea your life</h3> [video width="600" height="294" poster="/images/demo/video/movie_bg.jpg"] [source type="video/mp4" url="images/demo/video/envato_sting.mp4"][/source] [source type="video/ogg" url="images/demo/video/envato_sting.ogv"][/source] [source type="video/webm" url="images/demo/video/envato_sting.webm"][/source] [/video][/column] [/grid]

Widgetkit

The Widgetkit Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.

Features at a glance

  • Display images, videos, HTML, Iframes, Ajax requests and SWF
  • Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
  • Group lightboxes and mix different content types
  • Responsive design to fit images great on mobile devices
  • Load other widgets in lightbox
  • 3 different opening and closing transitions
  • 4 different caption styles
  • Keyboard and mouse scroll wheel navigation
  • Build on the latest jQuery version
  • Works with Joomla and WordPress

Examples

Different animations - fade, elastic and none

fade
fade
fade
markup
<a data-lightbox="transitionIn:fade; transitionOut:fade;" href="/images/demo/sample_big.jpg"><img src="/images/demo/sample.jpg" alt="fade" width="250" height="165" /></a>

Different title positions- float and over

fade
fade
markup
<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

fade
fade
fade
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

<a data-lightbox="width:780;height:414;" href="#wk-1">Lightbox</a>

How to use

Use the HTML5 custom data attribute data-lightbox to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>

Here is a list of the most common parameters:

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

How to use

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.

How to use

Use the HTML5 custom data attribute data-spotlight to activate the spotlight.

<a data-spotlight="on" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
</a>

To create a custom overlay use a div element with the CSS class overlay. You can set the effect parameter to the data attribute. For example:

<a data-spotlight="effect:bottom;" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
  <span class="overlay">Custom Overlay</span>
</a>

You can set the effect parameter to fade, bottom, top, right and left.

Pricing Tables

Use the [pricing_grid] shortcode to create a set of pricing tables. You can create a minimum of 2 pricing tables and a maximum of 6 pricing tables.


Two column pricing tables


$999

Standard Plan

  • 24/5 Support
  • 3 months Renewal
  • 1 User Licence
  • No Contracts
  • 1 Domain
Buy now
$2999

Developer Plan

  • 24/7 Support
  • 7 months Renewal
  • 5 User Licences
  • No Contracts
  • 5 Domain
Buy Now

  • show code

    [pricing_grid columns="two"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <span>save 10% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3 <span>save 20% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]



$999

Standard Plan

  • 24/5 Support
  • 3 months Renewal
  • 1 User Licence
  • No Contracts
  • 1 Domain
Buy Now
$1999

Professional Plan

  • 24/6 Support
  • 5 months Renewal
  • 3 User Licences
  • No Contracts
  • 3 Domain
Buy Now
$2999

Developer Plan

  • 24/7 Support
  • 7 months Renewal
  • 5 User Licences
  • No Contracts
  • 5 Domain
Buy Now

  • show code

    [pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <span>save 10% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$15<sub>99</sup>" table-caption="Plan 2 <span>save 30% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3 <span>save 20% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]


Pricing tables with focus

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


$39 99

Standard Plan

  • 24/5 Support
  • 3 months Renewal
  • 1 User Licence
  • Contracts
  • Unlimited bandwidth
Buy Now
$49 99

Professional Plan

Buy Now
$69 99

Developer Plan

  • 24/7 Support
  • 7 months Renewal
  • 5 User Licences
  • No Contracts
  • Unlimited bandwidth
Buy Now

  • show code

    [pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check uk-text-success"]detail 2[/li] [li icon="icon-times uk-text-danger"]Not included[/li] [/pricing_table][pricing_table table-config="focus tm-shift-top" price="$15<sub>99</sup>" table-caption="Plan 2" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check uk-text-success"]detail 2[/li] [li icon="icon-check uk-text-danger"]<a href="#" title="your tooltip goes here" data-uk-tooltip="{pos: 'top'}"><abbr>detail with tooltip</abbr></a>[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check uk-text-success"]detail 2[/li] [li icon="icon-times uk-text-danger"]Not included[/li] [/pricing_table] [/pricing_grid]


Four column pricing tables

$999

Standard Plan

  • 24/5 Support
  • 3 months Renewal
  • 1 User Licence
  • No Contracts
  • 1 Domain
Buy Now

$1999

Professional Plan

  • 24/6 Support
  • 5 months Renewal
  • 3 User Licences
  • No Contracts
  • 3 Domain
Buy Now

$2999

Developer Plan

  • 24/6 Support
  • 5 months Renewal
  • 3 User Licences
  • No Contracts
  • 3 Domain
Buy Now

$19999

Life Plan

  • 24/7 Support
  • 7 months Renewal
  • 5 User Licences
  • No Contracts
  • 5 Domain
Buy Now


  • show code

    [pricing_grid columns="four"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$15<sub>99</sup>" table-caption="Plan 2" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$39<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]


Five column pricing tables


$999

Standard Plan

  • 24/5 Support
  • 3 months Renewal
  • 1 User Licence
  • No Contracts
  • 1 Domain
Buy Now

$1999

Professional Plan

  • 24/6 Support
  • 5 months Renewal
  • 3 User Licences
  • No Contracts
  • 3 Domain
Buy Now

$2999

Developer Plan

  • 24/6 Support
  • 5 months Renewal
  • 3 User Licences
  • No Contracts
  • 3 Domain
  • Free support
Buy Now

$5999

Advanced Plan

  • 24/6 Support
  • 5 months Renewal
  • 3 User Licences
  • No Contracts
  • 3 Domain
Buy Now

$19999

Life Plan

  • 24/7 Support
  • 7 months Renewal
  • 5 User Licences
  • No Contracts
  • 5 Domain
Buy Now


  • show code

    [pricing_grid columns="five"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$15<sub>99</sup>" table-caption="Plan 2" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="focus tm-shift-top" price="$20<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 4" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$39<sub>99</sup>" table-caption="Plan 5" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]

Shortcodes

Headings

Here are some examples of headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
markup

[heading size="h1"]H1 Heading[/heading]


Heading with underline

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:

ClassDescription
[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.


markup

<p>[block_number]{number}[/block_number]Your content here</p>


Block Dates

29Jan

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

19apr

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

30Jun

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

03aug

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

23sep

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

10dec

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 use the date block style create a paragraph in the following format

markup

[date 03:dec] your content here[/date]


Block Icons

Creativity

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

Design

Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition.

Strategic

Do not dream of the future, concentrate the mind on the present moment.


markup

[block_icon icon="icon-leaf"]Your content here[/block_icon]


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.

markup

pre {
    margin: 15px 0;
    padding: 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
}

Lists

You can create an unordered list using the [list]. The li element defines the list item.

Simple List

  • List Item 1
  • List Item 2
  • List Item 3

markup

[list]
   [li]List Item 1[/li]
   [li]List Item 2[/li]
   [li]List Item 3[/li]
[/list]

You can create lists with different style variations. E.g Lists with alternative stripes, lists with icons etc.

Lists with stripes


  • List Item 1
  • List Item 2
  • List Item 3

markup

[list style="uk-list-striped"]
   [li]List Item 1[/li]
   [li]List Item 2[/li]
   [li]List Item 3[/li]
[/list]


Lists with icons

Adding icons to your list, makes them even look more outstanding. Check out the entire collection of icon fonts that you can use with lists here

  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor

markup

[list style="list-icons"]
   [li icon="icon-asterisk"]List Item 1[/li]
   [li icon="icon-asterisk"]List Item 2[/li]
   [li icon="icon-asterisk"]List Item 3[/li]
[/list]


Nested Lists

  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
    • Lorem ipsum dolor
    • consectetur adipisicing elit
    • sed do eiusmod tempor
  • dolor adipisicing elit

markup

[list style="list-icons"]
   [li icon="icon-asterisk"]List Item 1[/li]
   [li icon="icon-asterisk"]List Item 2[/li]
      [nested_list]
         [li icon="icon-asterisk"]Child Item 1[/li]
         [li icon="icon-asterisk"]Child Item 2[/li]
      [/nested_list]
   [li icon="icon-asterisk"]List Item 3[/li]
[/list]

Buttons

To create a button, use the [button] shortcode and customize it using the various parameters available

ParameterDescriptionParameters
Style Defines the button style or class simple, default, primary, line, success, danger, link
href url link of the button n/a
Target specifies where to open the linked document _blank, _self, _parent, _top


Examples

Simple link

markup

[button style="simple" href="#" target="blank"]title[/button]
[button_input style="default" href="#" target="blank"]title[/button_input]


Button variations

Simple Default Primary Line Success Danger link

markup

[button style="simple" href="#" target="_self"]simple[/button]
[button style="default" href="#" target="_self"]Default[/button]
[button style="primary" href="#" target="_self"]primary[/button]
[button style="line" href="#" target="_self"]line[/button]
[button style="success" href="#" target="_self"]success[/button]
[button style="danger" href="#" target="_self"]danger[/button]
[button style="link" href="#" target="_self"]link[/button]


Button sizes

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

mini button small button default button Large button

markup

[button style="color uk-button-mini" href="#" target="_self"]mini button[/button]
[button style="color uk-button-small" href="#" target="_self"]small button[/button]
[button style="color" href="#" target="_self"]default button[/button]
[button style="color uk-button-large" href="#" target="_self"]Large button[/button]


Button group

To create a button group, wrap the [button_group] shortcode around the buttons that you'd like to be in the same group.





markup

[button_group]
   [button style="color" href="#" target="self"]small[/button]
   [button style="color" href="#" target="self"]medium[/button]
   [button style="color" href="#" target="self"]large[/button]
[/button_group]


Button with icons

To create a button with icon, add the [icon] shortcode besides the text of the button. Click here to see a list of all icons


complete events list gallery Download

markup

[button style="default" href="#" target="_self"]gallery [icon style="icon-camera"/][/button]


Icon buttons

You can create icon buttons using the [icon_button] shortcode. These can come in handy especially when creating social icons.




markup

[icon_button icon="icon-twitter" url="#" target="_self"][/icon_button]
[icon_button icon="icon-dribbble" url="#" target="_self"][/icon_button]
[icon_button icon="icon-facebook" url="#" target="_self"][/icon_button]

Dropdowns

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.



markup

[dropdown style="uk-button-dropdown"]
[button style="default" href="#" target="_self"]Dropdown 1 [icon style="icon-angle-down"/][/button]
   [nav style=""]
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Menu item</a></li>
      <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>
      <li><a href="#">Separated item</a></li>
   [/nav]
[/dropdown]

Button group with dropdowns

You can also use button groups to split buttons into a standard action on the left and a dropdown toggle on the right.



markup

[button_group]
   [button style="color" href="#" target="_self"]split button[/button]
   [dropdown style=""]
   [button style="color" href="#" target="_self"][icon style="icon-angle-down"/][/button]
         [nav style=""]
            ...menu items
         [/nav]
   [/dropdown]
[/button_group]

 

The following is a list of possible style options for the [nav] dropdown menu

styleDescription
uk-color Use the main menu color in the dropdown menu
uk-dropdown-flip Aligns the dropdown menu to the right
uk-dropdown-up Aligns the dropdown menu above the toggle
uk-dropdown-center Centers the dropdown menu.
uk-dropdown-small Set the dropdown to be smaller

markup

[button_group]
   [button style="color" href="#" target="_self"]split button[/button]
   [dropdown style=""]
   [button style="color" href="#" target="_self"][icon style="icon-angle-down"/][/button]
         [nav style="uk-color uk-dropdown-up uk-dropdown-center uk-dropdown-small"]
            ...menu items
         [/nav]
   [/dropdown]
[/button_group]

 


Alerts

To emphasize a point with an alert box, use the [alert] shortcode

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

[alert]Your alert message here[/alert]


Color variations

You can change the color scheme of the alert box by adding the following styles: success, warning, or danger

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

[alert style="success"]Your alert message here[/alert]


Closable alerts

To add a close button to an alert, use the close-button parameter in the alert shortcode

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment

markup

[alert close-button style="danger"]Your alert message here[/alert]


Size modifier

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

Charles Finney

Founder

Change will not come if we wait for some other person or some other time

Linda Russ - Head of Marketing

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

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

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.

new
legend
note
normal


1
2
3
4
5


markup

[badge style="success"]new[/badge]
[badge style="warning"]legend[/badge]
[badge style="danger"]note[/badge]
[badge style="note"]normal[/badge]
[badge style="note uk-badge-notification"]1[/badge]

Toggles

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.


markup

<a class="uk-icon-dribbble" data-uk-tooltip href="http://dribbble.com/arrowthemes" target="blank" title="dribbble"></a>


Tooltip position

You can specify the position of the tooltip by adding one of the following options to the data-uk-tooltip attribute

OptionsDescription
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 bottom.
pos:'bottom-left' Aligns the tooltip to bottom left.
pos:'bottom-right' Aligns the tooltip to bottom right.
pos:'left' Aligns the tooltip to left.
pos:'right' Aligns the tooltip to right.

 


markup

<a class="uk-icon-dribbble" data-uk-tooltip="{pos: 'bottom'}" href="http://dribbble.com/arrowthemes" target="blank" title="dribbble"></a>

Progress bar

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:

 

OptionsDescription
uk-progress-mini Size modifier for a mini progress bar
uk-progress-small Size modifier for a small progress bar
uk-progress-primary Color modifier for a blue progress bar
uk-progress-success Color modifier for a green progress bar
uk-progress-warning Color modifier for an orange progress bar
uk-progress-danger Color modifier for a red progress bar
uk-progress-striped Add stripes to the progress bar
uk-active Animate a striped progress bar


Simple progress bar


markup

[progress style="" width=40][/progress]


Size modifiers


markup

[progress style="uk-progress-mini" width=40][/progress]
[progress style="uk-progress-small" width=50][/progress]
[progress style="" width=60][/progress]


Colored progress bars


markup

[progress style="uk-progress-primary" width=30][/progress]
[progress style="uk-progress-success" width=40][/progress]
[progress style="uk-progress-warning" width=50][/progress]
[progress style="uk-progress-danger" width=60][/progress]


Combined options

loading...

markup

[progress style="uk-progress-success uk-progress-striped uk-active" width=45]loading...[/progress]

Tabs

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.

Horizontal tabs


  • This is the first 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 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.


markup
[tab tab_content_id="tabs_example1"]
   [tab_link active]Tab 1[/tab_link]
   [tab_link]Tab 2[/tab_link]
   [tab_link]Tab 3[/tab_link]
[/tab]

[tab_content content_id="tabs_example1"]
   [tab]Your content goes here[/tab]
   [tab]Your content goes here[/tab]
   [tab]Your content goes here[/tab]
[/tab_content]

Vertical tabs

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.


  • This is the first 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 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.


markup
[tab_grid]
   [column size="2-10"]
      [tab_left tab_content_id="tabs_example1"]
         [tab_link active]Tab 1[/tab_link]
         [tab_link]Tab 2[/tab_link]
         [tab_link]Tab 3[/tab_link]
      [/tab_left]
   [/column]

   [column size="8-10"]
      [tab_content content_id="tabs_example1"]
         [tab]Your content goes here[/tab]
         [tab]Your content goes here[/tab]
         [tab]Your content goes here[/tab]
      [/tab_content]
   [/column]
[/tab_grid]

Tags

Tags can be used to highlight keywords within your content. To create a tag, use the [tag] shortcode


Themeforest envato youtube action web design

markup

[tag url="#"]Themeforest[/tag]
[tag url="#"]envato[/tag]
[tag url="#"]youtube[/tag]
[tag url="#"]web design[/tag]

Tables

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.

Table caption
Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
  • show code

    <table class="uk-table"> <caption>...</caption> <thead> <tr> <th>...</th> </tr> </thead> <tfoot> <tr> <td>...</td> </tr> </tfoot> <tbody> <tr> <td>...</td> </tr> </tbody> </table>

Style variation

You can add more styling to the table by using a combination of classes to improve the visual appearance of your table

Settings Productivity Totals
Totals $ 49,000.00
Table Data Table Data $ 10,000.00
Table Data Table Data $ 15,000.00
Table Data Table Data $ 24,000.00

  • show code

    <table class="uk-table uk-table-hover uk-table-striped"> <thead> <tr> <th>[icon style="icon-gear"/] Settings</th> <th>[icon style="icon-leaf"/] Productivity</th> <th>[icon style="icon-usd"/] Totals</th> </tr> </thead> <tfoot> <tr> <td>Totals</td> <td></td> <td>$ 49,000.00</td> </tr> </tfoot> <tbody> <tr> <td class="uk-width-2-10">Table Data</td> <td class="uk-width-5-10">Table Data</td> <td class="uk-width-3-10">$ 10,000.00</td> </tr> <tr> <td class="uk-width-2-10">Table Data</td> <td class="uk-width-5-10">Table Data</td> <td class="uk-width-3-10">$ 15,000.00</td> </tr> <tr> <td class="uk-width-2-10">Table Data</td> <td class="uk-width-5-10">Table Data</td> <td class="uk-width-3-10">$ 24,000.00</td> </tr> </tbody> </table>

You can view more examples and classes that you can use from here


Images

To create an image, use the image shortcode. You can add the uk-thumbnail-caption class to a <div> element to apply a caption under the image.

StyleDescription
uk-thumbnail creates a border around the image
uk-image-round creates an image with rounded corners
uk-thumbnail-caption Adds a caption to an image using a separate div
uk-thumbnail-expand Makes the image fill the entire width of the parent container



Image with thumbnail style

sample_1
markup

[image style="uk-thumbnail" url="images/demo/sample.jpg" title="sample_1" width="275" height="182" /]


Image with rounded corners style

sample_1
markup

[image style="uk-image-round" url="images/demo/sample.jpg" title="sample_1" width="275" height="182" /]


Image with caption

You can add the uk-thumbnail-caption class to a <div> element to apply a caption under the image.

sample_1
image caption


markup

<div class="uk-thumbnail">
   [image style="" url="images/demo/sample.jpg" title="sample_1" width="275" height="182" /]
   <div class="uk-thumbnail-caption">image caption</div>
</div>

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.

 

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

Trigger a modal box from link


modal-a   modal-b   modal-c

markup

[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]

Toggle modal box from buttons


modal-a   modal-b   modal-c

markup

[modal_box button style="color" target="modal-a"]modal-a[/modal_box]
[modal_box button style="color" target="modal-b"]modal-b[/modal_box]
[modal_box button style="color" target="modal-c"]modal-c[/modal_box]


Toggle modal box for inline content

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]


Popup content

Inline content

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



markup

[audio options="autoplay" width="400" src="/images/demo/audio/sample.mp3" type="audio/mp3"][/audio]

Video

To create an video player, use the [video] shortcode



markup

[video width="100%" height="520" poster="/images/demo/video/movie_bg.jpg"]
   [source type="video/mp4" url="images/demo/video/envato_sting.mp4"][/source]
   [source type="video/ogg" url="images/demo/video/envato_sting.ogv"][/source]
   [source type="video/webm" url="images/demo/video/envato_sting.webm"][/source]
[/video]

Text level semantics

ElementDescription
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using q element inside a q element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

You can find more html tags and classes that you can use from here


Module Classes

Module ClassDescription
uk-panel-box-primary Change the module background to have the primary background; You can specify the primary background from the color customizer panel.
uk-panel-box-secondary Change the module background to have the secondary background; You can specify the secondary background from the color customizer panel.
tm-muted-background Set the module background to a light-grey muted background.
tm-caps Set the module caption to be in capitalized words with letter spacing and a small font
tm-border-top-none Remove the top border on a module
tm-border-top-grey Set a grey top border on the module, instead of a colored one
tm-padding Add extra padding on a module
tm-padding-remove Remove all padding on a module
tm-overflow-hidden Set the module to hide any overflow of images or text set to absolute absolute
  • 1
  • 2

[column size="1-2"]

Cento Lean Lab    c/o Istituto ISIT Bassi-Burgatti di Cento

 

Produzione snella e miglioramento continuo

Centoform ha contribuito significativamente alla creazione del CENTO LEAN LAB, laboratorio dedicato alle tecniche di Lean Production. Hanno collaborato alla realizzazione del progetto VM MOTORI Spa, ISIT Bassi-Burgatti, Università di Ferrara e Fondazione Cassa di Risparmio di Cento con l’obiettivo di dotare la scuola e il territorio di un laboratorio che avvicini studenti e lavoratori alla gestione dei processi produttivi con metodologia lean.

 [/column] [column size="1-2"] Cento Lean Lab [/column]

Partnership e collaborazioni

 


  •        
  •      
  • alt-icon
[/grid]