Headings

Here are some examples of headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

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

Heading with underline

To add a line beneath a heading, use the underline style. Example:

Your title goes here

[heading size="h3" style="underline"]Your title goes here[/heading]

Module title styling

To mimic a module title, use the module-title style. The style attribute can also be used to add any other class to the headings. Example:

Your module title

[heading size="h3" style="underline"]Your module title[/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:

Examples

[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

[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

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

Block Dates

To use the date block style create a paragraph in the following format

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

Block Icons

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

You can also add a border around the icon, by using the [border_icon] shortcode

[border_icon icon="icon-7s-server"]Your content goes here[/border_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

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

John Doe

[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

[testimonial author="author name" title="author's title" avatar="url-path-to-avatar" icon="icon"]
   your quote goes here
[/testimonial]

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.

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

[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

[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

[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

[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

Examples

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

Button variations

[button style="default" href="#" target="_self"]Default[/button]
[button style="color" href="#" target="_self"]Color[/button]
[button style="primary" href="#" target="_self"]primary[/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

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

[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

[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. To make the icon button have the same color as colored button, add the uk-color class right after the icon

[icon_button icon="icon-twitter" url="#" target="_self"][/icon_button]
[icon_button icon="icon-dribbble uk-color" 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.

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

NOTE To use a colored menu, add the uk-color style to the nav shortcode. In this case, the uikit dropdown menu will inherit the color of the site's dropdown menu, which is set via the template settings.

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.

[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

[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

[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

[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

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

[alert close-button style="success uk-alert-large"]
[heading size="h3" style="underline"]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]
[heading size="h3" style="underline"]Panel Title[/heading]
Your content here
[/panel]

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.

[panel style="uk-panel-box-primary"]
[heading size="h3" style="underline 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.

[panel style="uk-panel-box-primary"]
[heading size="h3" style="underline 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

 

[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

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

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

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

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

[toggle state="closed code" title="Your toggle title here"]Your toggle code here[/toggle]

Nested Toggles

You can also add toggles within toggles by using the [child_toggle] shortcode within the [toggle] shortcode.

• Can toggles support child toggles?

  Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work. For theme customization my hourly rate is $65.

  • This is a child toggle A

    A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

  • This is a child toggle B

    A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

  • This is a child toggle C

    A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

[toggle state="closed" title="Toggle title"]some text here
[child_toggle state="closed" title="child toggle A"]some text here[/child_toggle]
[/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.

<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

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

Simple progress bar

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

Size modifiers

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

Colored progress bars

[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

[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

• Tab 1
• Tab 2
• Tab 3

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

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

[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

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

Tables

To create clean formatted tables using uikit style, add the uk-table class to a table. The table rows will be separated by lines.

• 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

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

Image with thumbnail style

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

Image with rounded corners style

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

image caption

<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: reveal-a, reveal-b and reveal-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.

For each module linked to reveal-a, reveal-b or reveal-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_box link target="reveal-a"]reveal-a[/modal_box] 
[modal_box link target="reveal-b"]reveal-b[/modal_box] 
[modal_box link target="reveal-c"]reveal-c[/modal_box]

Toggle modal box from buttons

[modal_box button style="color" target="reveal-a"]reveal-a[/modal_box]
[modal_box button style="color" target="reveal-b"]reveal-b[/modal_box]
[modal_box button style="color" target="reveal-c"]reveal-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:

<!-- 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="mod-color"]
...
[/modal_box]

Popup content

Audio

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

[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

[video width="750" height="380" poster="/images/demo/video/envato_p_h_big.png"]
   [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

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

• show code

  [grid] [column size="1-5"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_5/1_big.jpg" title="your caption here" data-spotlight="on"><img width="213" height="140" src="/images/demo/gallery/column_5/1.jpg" alt="gallery" /></a></p> [/column] [column size="1-5"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_5/2_big.jpg" title="your caption here" data-spotlight="on"><img width="213" height="140" src="/images/demo/gallery/column_5/2.jpg" alt="gallery" /></a></p> [/column] [column size="1-5"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_5/3_big.jpg" title="your caption here" data-spotlight="on"><img width="213" height="140" src="/images/demo/gallery/column_5/3.jpg" alt="gallery" /></a></p> [/column] [column size="1-5"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_5/4_big.jpg" title="your caption here" data-spotlight="on"><img width="213" height="140" src="/images/demo/gallery/column_5/4.jpg" alt="gallery" /></a></p> [/column] [column size="1-5"] <p><a class="uk-thumbnail-expand" data-lightbox="group:gallery" href="/images/demo/gallery/column_5/5_big.jpg" title="your caption here" data-spotlight="on"><img width="213" height="140" src="/images/demo/gallery/column_5/5.jpg" alt="gallery" /></a></p> [/column] [/grid]

• Built in the Cloud

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

---

• Take a snapshot

  Never allow yourself to be made a victim. Accept no one's definition of your life

---

• Interactive design

  Don't go around saying the world owes you a living. The world owes you nothing

---

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

• show code

  [pricing_grid columns="two"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <p>save 10% on bundle</p>" 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 <p>save 20% on bundle</p>" 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]

• show code

  [pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <p>save 10% on bundle</p>" 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 <p>save 30% on bundle</p>" 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 <p>save 20% on bundle</p>" 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 uk-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

• show code

  [pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <p>save 10% on bundle</p>" 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 uk-shift-top" price="$15<sub>99</sup>" table-caption="Plan 2 <p>save 30% on bundle</p>" 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 <p>save 20% on bundle</p>" 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

• 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

• 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 uk-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]

Six column pricing tables

• show code

  [pricing_grid columns="six"] [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="$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="$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]

• Are you available for freelance work?

  Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work. For theme customization my hourly rate is $65.

• Where can I find a wordpress/Joomla version?

  Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work.A. Lorem ipsum dolor amit I will embark on designing the HTML site first before venturing into a CMS theme. Depending on the feedback i get from buyers, I will select themes that I convert to CMS and they will be available on Themeforest or on my site.

• I bought your theme and I like it, but I need help with ABC

  A. Thank you! I will answer all of your questions

  • At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum
  • Justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum
  • Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum

• I bought your theme but I think you should include ABC

  A. Please explain what I should improve and I'll add it to my to-do list Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum

• Is there documentation available for this theme?

  A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum

• I would like to see more work from you

  A. Sure, we are busy designing some real nice stuff to be uploaded pretty soon Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum

• Can toggles support child toggles?

  Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work. For theme customization my hourly rate is $65.

  • This is a child toggle A

    A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

  • This is a child toggle B

    A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

  • This is a child toggle C

    A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

• Icons
• How to use

• Web Application Icons

  • icon-adjust
  • icon-anchor
  • icon-archive
  • icon-arrows
  • icon-arrows-h
  • icon-arrows-v
  • icon-asterisk
  • icon-ban
  • icon-bar-chart-o
  • icon-barcode
  • icon-bars
  • icon-beer
  • icon-bell
  • icon-bell-o
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-o
  • icon-briefcase
  • icon-bug
  • icon-building-o
  • icon-bullhorn
  • icon-bullseye
  • icon-calendar
  • icon-calendar-o
  • icon-camera
  • icon-camera-retro
  • icon-caret-square-o-down
  • icon-caret-square-o-left
  • icon-caret-square-o-right
  • icon-caret-square-o-up
  • icon-certificate
  • icon-check
  • icon-check-circle
  • icon-check-circle-o
  • icon-check-square
  • icon-check-square-o
  • icon-circle
  • icon-circle-o
  • icon-clock-o
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-code
  • icon-code-fork
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-o
  • icon-comments
  • icon-comments-o
  • icon-compass
  • icon-credit-card
  • icon-crop
  • icon-crosshairs
  • icon-cutlery
  • icon-dashboard (alias)
  • icon-desktop
  • icon-dot-circle-o
  • icon-download
  • icon-edit (alias)
  • icon-ellipsis-h
  • icon-ellipsis-v
  • icon-envelope
  • icon-envelope-o
  • icon-eraser
  • icon-exchange
  • icon-exclamation
  • icon-exclamation-circle
  • icon-exclamation-triangle
  • icon-external-link
  • icon-external-link-square
  • icon-eye
  • icon-eye-slash
  • icon-female
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-fire-extinguisher
  • icon-flag
  • icon-flag-checkered
  • icon-flag-o
  • icon-flash (alias)
  • icon-flask
  • icon-folder
  • icon-folder-o
  • icon-folder-open
  • icon-folder-open-o
  • icon-frown-o
  • icon-gamepad
  • icon-gavel
  • icon-gear (alias)
  • icon-gears (alias)
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group (alias)
  • icon-hdd-o
  • icon-headphones
  • icon-heart
  • icon-heart-o
  • icon-home
  • icon-inbox
  • icon-info
  • icon-info-circle
  • icon-key
  • icon-keyboard-o
  • icon-laptop
  • icon-leaf
  • icon-legal (alias)
  • icon-lemon-o
  • icon-level-down
  • icon-level-up
  • icon-lightbulb-o
  • icon-location-arrow
  • icon-lock
  • icon-magic
  • icon-magnet
  • icon-mail-forward (alias)
  • icon-mail-reply (alias)
  • icon-mail-reply-all
  • icon-male
  • icon-map-marker
  • icon-meh-o
  • icon-microphone
  • icon-microphone-slash
  • icon-minus
  • icon-minus-circle
  • icon-minus-square
  • icon-minus-square-o
  • icon-mobile
  • icon-mobile-phone (alias)
  • icon-money
  • icon-moon-o
  • icon-music
  • icon-pencil
  • icon-pencil-square
  • icon-pencil-square-o
  • icon-phone
  • icon-phone-square
  • icon-picture-o
  • icon-plane
  • icon-plus
  • icon-plus-circle
  • icon-plus-square
  • icon-plus-square-o
  • icon-power-off
  • icon-print
  • icon-puzzle-piece
  • icon-qrcode
  • icon-question
  • icon-question-circle
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-reply
  • icon-reply-all
  • icon-retweet
  • icon-road
  • icon-rocket
  • icon-rss
  • icon-rss-square
  • icon-search
  • icon-search-minus
  • icon-search-plus
  • icon-share
  • icon-share-square
  • icon-share-square-o
  • icon-shield
  • icon-shopping-cart
  • icon-sign-in
  • icon-sign-out
  • icon-signal
  • icon-sitemap
  • icon-smile-o
  • icon-sort
  • icon-sort-alpha-asc
  • icon-sort-alpha-desc
  • icon-sort-amount-asc
  • icon-sort-amount-desc
  • icon-sort-asc
  • icon-sort-desc
  • icon-sort-down (alias)
  • icon-sort-numeric-asc
  • icon-sort-numeric-desc
  • icon-sort-up (alias)
  • icon-spinner
  • icon-square
  • icon-square-o
  • icon-star
  • icon-star-half
  • icon-star-half-empty (alias)
  • icon-star-half-full (alias)
  • icon-star-half-o
  • icon-star-o
  • icon-subscript
  • icon-suitcase
  • icon-sun-o
  • icon-superscript
  • icon-tablet
  • icon-tachometer
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-terminal
  • icon-thumb-tack
  • icon-thumbs-down
  • icon-thumbs-o-down
  • icon-thumbs-o-up
  • icon-thumbs-up
  • icon-ticket
  • icon-times
  • icon-times-circle
  • icon-times-circle-o
  • icon-tint
  • icon-toggle-down (alias)
  • icon-toggle-left (alias)
  • icon-toggle-right (alias)
  • icon-toggle-up (alias)
  • icon-trash-o
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-unlock
  • icon-unlock-alt
  • icon-unsorted (alias)
  • icon-upload
  • icon-user
  • icon-users
  • icon-video-camera
  • icon-volume-down
  • icon-volume-off
  • icon-volume-up
  • icon-warning (alias)
  • icon-wheelchair
  • icon-wrench

   

  Form Control Icons

  • icon-check-square
  • icon-check-square-o
  • icon-circle
  • icon-circle-o
  • icon-dot-circle-o
  • icon-minus-square
  • icon-minus-square-o
  • icon-plus-square
  • icon-plus-square-o
  • icon-square
  • icon-square-o

   

  Editor Icons

  • icon-align-center
  • icon-align-justify
  • icon-align-left
  • icon-align-right
  • icon-bold
  • icon-chain (alias)
  • icon-chain-broken
  • icon-clipboard
  • icon-columns
  • icon-copy (alias)
  • icon-cut (alias)
  • icon-dedent (alias)
  • icon-eraser
  • icon-file
  • icon-file-o
  • icon-file-text
  • icon-file-text-o
  • icon-files-o
  • icon-floppy-o
  • icon-font
  • icon-indent
  • icon-italic
  • icon-link
  • icon-list
  • icon-list-alt
  • icon-list-ol
  • icon-list-ul
  • icon-outdent
  • icon-paperclip
  • icon-paste (alias)
  • icon-repeat
  • icon-rotate-left (alias)
  • icon-rotate-right (alias)
  • icon-save (alias)
  • icon-scissors
  • icon-strikethrough
  • icon-table
  • icon-text-height
  • icon-text-width
  • icon-th
  • icon-th-large
  • icon-th-list
  • icon-underline
  • icon-undo
  • icon-unlink (alias)

   

  Currency Icons

  • icon-bitcoin (alias)
  • icon-btc
  • icon-cny (alias)
  • icon-dollar (alias)
  • icon-eur
  • icon-euro (alias)
  • icon-gbp
  • icon-inr
  • icon-jpy
  • icon-krw
  • icon-money
  • icon-rmb (alias)
  • icon-rouble (alias)
  • icon-rub
  • icon-ruble (alias)
  • icon-rupee (alias)
  • icon-try
  • icon-turkish-lira (alias)
  • icon-usd
  • icon-won (alias)
  • icon-yen (alias)

   

  Arrow Icons

  • icon-angle-double-down
  • icon-angle-double-left
  • icon-angle-double-right
  • icon-angle-double-up
  • icon-angle-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-arrow-circle-down
  • icon-arrow-circle-left
  • icon-arrow-circle-o-down
  • icon-arrow-circle-o-left
  • icon-arrow-circle-o-right
  • icon-arrow-circle-o-up
  • icon-arrow-circle-right
  • icon-arrow-circle-up
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrows
  • icon-arrows-alt
  • icon-arrows-h
  • icon-arrows-v
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-square-o-down
  • icon-caret-square-o-left
  • icon-caret-square-o-right
  • icon-caret-square-o-up
  • icon-caret-up
  • icon-chevron-circle-down
  • icon-chevron-circle-left
  • icon-chevron-circle-right
  • icon-chevron-circle-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-hand-o-down
  • icon-hand-o-left
  • icon-hand-o-right
  • icon-hand-o-up
  • icon-long-arrow-down
  • icon-long-arrow-left
  • icon-long-arrow-right
  • icon-long-arrow-up
  • icon-toggle-down (alias)
  • icon-toggle-left (alias)
  • icon-toggle-right (alias)
  • icon-toggle-up (alias)

   

  Video Icons

  • icon-arrows-alt
  • icon-backward
  • icon-compress
  • icon-eject
  • icon-expand
  • icon-fast-backward
  • icon-fast-forward
  • icon-forward
  • icon-pause
  • icon-play
  • icon-play-circle
  • icon-play-circle-o
  • icon-step-backward
  • icon-step-forward
  • icon-stop
  • icon-youtube-play

   

  Brand Icons

  • icon-adn
  • icon-android
  • icon-apple
  • icon-bitbucket
  • icon-bitbucket-square
  • icon-bitcoin (alias)
  • icon-btc
  • icon-css3
  • icon-dribbble
  • icon-dropbox
  • icon-facebook
  • icon-facebook-square
  • icon-flickr
  • icon-foursquare
  • icon-github
  • icon-github-alt
  • icon-github-square
  • icon-gittip
  • icon-google-plus
  • icon-google-plus-square
  • icon-html5
  • icon-instagram
  • icon-linkedin
  • icon-linkedin-square
  • icon-linux
  • icon-maxcdn
  • icon-pagelines
  • icon-pinterest
  • icon-pinterest-square
  • icon-renren
  • icon-skype
  • icon-stack-exchange
  • icon-stack-overflow
  • icon-trello
  • icon-tumblr
  • icon-tumblr-square
  • icon-twitter
  • icon-twitter-square
  • icon-vimeo-square
  • icon-vk
  • icon-weibo
  • icon-windows
  • icon-xing
  • icon-xing-square
  • icon-youtube
  • icon-youtube-play
  • icon-youtube-square

   

  Medical Icons

  • icon-ambulance
  • icon-h-square
  • icon-hospital-o
  • icon-medkit
  • icon-plus-square
  • icon-stethoscope
  • icon-user-md
  • icon-wheelchair

  Stroke 7 Icons

  • icon-7s-cloud-upload
  • icon-7s-close
  • icon-7s-cloud-download
  • icon-7s-close-circle
  • icon-7s-angle-up
  • icon-7s-angle-up-circle
  • icon-7s-angle-right
  • icon-7s-angle-right-circle
  • icon-7s-angle-left
  • icon-7s-angle-left-circle
  • icon-7s-angle-down
  • icon-7s-angle-down-circle
  • icon-7s-wallet
  • icon-7s-volume2
  • icon-7s-volume1
  • icon-7s-voicemail
  • icon-7s-video
  • icon-7s-user
  • icon-7s-upload
  • icon-7s-unlock
  • icon-7s-umbrella
  • icon-7s-trash
  • icon-7s-tools
  • icon-7s-timer
  • icon-7s-ticket
  • icon-7s-target
  • icon-7s-sun
  • icon-7s-study
  • icon-7s-stopwatch
  • icon-7s-star
  • icon-7s-speaker
  • icon-7s-signal
  • icon-7s-shuffle
  • icon-7s-shopbag
  • icon-7s-share
  • icon-7s-server
  • icon-7s-search
  • icon-7s-science
  • icon-7s-ribbon
  • icon-7s-repeat
  • icon-7s-refresh
  • icon-7s-refresh-cloud
  • icon-7s-radio
  • icon-7s-print
  • icon-7s-prev
  • icon-7s-power
  • icon-7s-portfolio
  • icon-7s-plus
  • icon-7s-play
  • icon-7s-plane
  • icon-7s-photo-gallery
  • icon-7s-phone
  • icon-7s-pen
  • icon-7s-paper-plane
  • icon-7s-paint
  • icon-7s-notebook
  • icon-7s-note
  • icon-7s-next
  • icon-7s-news-paper
  • icon-7s-musiclist
  • icon-7s-music
  • icon-7s-mouse
  • icon-7s-more
  • icon-7s-moon
  • icon-7s-monitor
  • icon-7s-micro
  • icon-7s-menu
  • icon-7s-map
  • icon-7s-map-marker
  • icon-7s-mail
  • icon-7s-mail-open
  • icon-7s-mail-open-file
  • icon-7s-magnet
  • icon-7s-loop
  • icon-7s-look
  • icon-7s-lock
  • icon-7s-lintern
  • icon-7s-link
  • icon-7s-like
  • icon-7s-light
  • icon-7s-less
  • icon-7s-keypad
  • icon-7s-junk
  • icon-7s-info
  • icon-7s-home
  • icon-7s-help2
  • icon-7s-help1
  • icon-7s-graph3
  • icon-7s-graph2
  • icon-7s-graph1
  • icon-7s-graph
  • icon-7s-global
  • icon-7s-gleam
  • icon-7s-glasses
  • icon-7s-gift
  • icon-7s-folder
  • icon-7s-flag
  • icon-7s-filter
  • icon-7s-file
  • icon-7s-expand1
  • icon-7s-expand2
  • icon-7s-edit
  • icon-7s-drop
  • icon-7s-drawer
  • icon-7s-download
  • icon-7s-display2
  • icon-7s-display1
  • icon-7s-diskette
  • icon-7s-date
  • icon-7s-cup
  • icon-7s-culture
  • icon-7s-crop
  • icon-7s-credit
  • icon-7s-copy-file
  • icon-7s-config
  • icon-7s-compass
  • icon-7s-comment
  • icon-7s-coffee
  • icon-7s-cloud
  • icon-7s-clock
  • icon-7s-check
  • icon-7s-chat
  • icon-7s-cart
  • icon-7s-camera
  • icon-7s-call
  • icon-7s-calculator
  • icon-7s-browser
  • icon-7s-box2
  • icon-7s-box1
  • icon-7s-bookmarks
  • icon-7s-bicycle
  • icon-7s-bell
  • icon-7s-battery
  • icon-7s-ball
  • icon-7s-back
  • icon-7s-attention
  • icon-7s-anchor
  • icon-7s-albums
  • icon-7s-alarm
  • icon-7s-airplay
  • icon-7s-cash
  • icon-7s-bluetooth
  • icon-7s-way
  • icon-7s-id
  • icon-7s-wristwatch
  • icon-7s-world
  • icon-7s-volume
  • icon-7s-users
  • icon-7s-user-female
  • icon-7s-up-arrow
  • icon-7s-switch
  • icon-7s-scissors
  • icon-7s-safe
  • icon-7s-right-arrow
  • icon-7s-plug
  • icon-7s-pin
  • icon-7s-paperclip
  • icon-7s-note2
  • icon-7s-network
  • icon-7s-mute
  • icon-7s-medal
  • icon-7s-like2
  • icon-7s-left-arrow
  • icon-7s-key
  • icon-7s-joy
  • icon-7s-film
  • icon-7s-disk
  • icon-7s-delete-user
  • icon-7s-bottom-arrow
  • icon-7s-add-user

• Icon font classes

  Icons can be added in menus, lists, buttons, modules, and basically, in any content. These icons are made available by Font Awesome and Pixeden. These icons use icon fonts which ensures they look sharp even on retina displays.

  [icon style="icon-gear"/]

  
  

  Adding icons to Menu items

  To add an icon to a menu item, create/edit a menu item > on the menu edit screen, click on 'Link type options' tab > on the 'link CSS style' option, add the icon name e.g icon-group

   

  important
  IceMegamenu doesn't support icons

  Adding icons to Modules

  To add an icon to a module, create/edit a module > on the module edit screen, click on 'Advanced options' tab > on the 'Module Class Suffix' option, add the icon name e.g icon-comments

  Adding icons to lists

  To add an icon to a list, use the list shortcode and apply the 'list-icons' style > then specify the icon name in the list items. You can see more examples here

  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]

  To add icons to buttons, see this page

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

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

"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

• show code

  [grid] [column size="1-3"] [heading size="h3" style="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="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="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]

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. Don't go around saying the world owes you a living. The world owes you nothing. It was here first. If you don't like something, change it. If you can't change it, change your attitude. Change will not come if we wait for some other person or some other time. We are the ones we've been waiting for. We are the change that we seek.

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. You are what you are. Accept no one's definition of your life; define yourself.

John Doe
Head of sales, arrowthemes

Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

Jane Doe
Marketing Director, arrowthemes

If you can't change it, change your attitude. Change will not come if we wait for some other person or some other time. We are the ones we've been waiting for. We are the change that we seek.

Tony Fadell

Blockquotes in Columns

Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself. Don't go around saying the world owes you a living. The world owes you nothing. It was here first. If you don't like something, change it. If you can't change it, change your attitude. Change will not come if we wait for some other person or some other time. We are the ones we've been waiting for. We are the change that we seek.