Headings
Here are some examples of headings
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H1 Heading
[heading size="h2" style="uk-margin-top uk-module-title" id="blocks"]Blocks[/heading]
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.
[line_break/]
[heading size="h3" style="uk-module-title"]Block numbers[/heading] [child_grid][column size="1-2"]
[block_number text="1"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success[/block_number]
[block_number text="2"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success[/block_number]
[block_number text="3"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success[/block_number]
[/column]
[column size="1-2"]
[block_number text="4"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success[/block_number]
[block_number text="5"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success[/block_number]
[block_number text="6"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success[/block_number]
[/column]
[/child_grid]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[block_number text="{text}"]Your content here[/block_number][/code]
[line_break/]
[heading size="h3" style="uk-margin-top uk-module-title"]Block Dates[/heading]
[child_grid]
[column size="1-2"]
[block_date date="29" month="Jan"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.[/block_date]
[block_date date="19" month="apr"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.[/block_date]
[block_date date="30" month="Jun"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.[/block_date]
[/column]
[column size="1-2"]
[block_date date="03" month="aug"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.[/block_date]
[block_date date="23" month="sep"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.[/block_date]
[block_date date="10" month="dec"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.[/block_date]
[/column]
[/child_grid]
To use the date block style create a paragraph in the following format
[badge style="note uk-margin-top"]markup[/badge]
[code]
[block_date date="03" month="dec"] your content here[/block_date][/code][line_break/]
[heading size="h3" style="uk-margin-top uk-module-title"]Block Icons[/heading]
[line_break/]
[child_grid]
[column size="1-3"]
[heading size="h3" style="uk-module-title"]Creativity[/heading]
[block_icon icon="clone"]
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/block_icon]
[/column]
[column size="1-3"]
[heading size="h3" style="uk-module-title"]Design[/heading]
[block_icon icon="gear"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/block_icon]
[/column]
[column size="1-3"]
[heading size="h3" style="uk-module-title"]Strategy[/heading]
[block_icon icon="area-chart"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/block_icon]
[/column]
[/child_grid][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[block_icon icon="leaf"]Your content here[/block_icon][/code]
[line_break/] To view a list of available icons that you can use in block icons, click here.
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title" id="blockquotes"]Blockquotes[/heading]
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
.
[line_break/] [heading size="h3" style="uk-module-title"]Blockquote example[/heading]
[blockquote author="John Doe" title=""]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[/blockquote] [badge style="note uk-margin-top"]markup[/badge]
[code]
[blockquote author="author_name"]
your quote goes here
[/blockquote][/code][line_break/]
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.
[line_break/]
[heading size="h3" style="uk-module-title"]Testimonial example[/heading]
[testimonial author="John Doe" title="Head of Sales, envato" avatar="images/demo/avatar/client-1-thumb.png" icon="quote-left"]Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers
you cannot be successful or happy.[/testimonial]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[testimonial author="author name" title="author's title" avatar="url-path-to-avatar" icon="icon"]
your quote goes here
[/testimonial][/code]
[line_break/]
[badge style="danger"]important[/badge][line_break/]
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
[line_break/]
[heading size="h3" style="uk-module-title"]Inline code[/heading]
To define a short inline computer code use the <code> element. For a larger code snippet use the [code] shortcode which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.
[badge style="note uk-margin-top"]markup[/badge]
[code]
[code].my-class {
margin: 15px 0;
padding: 10px;
}
[/code]
[/code]
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title" id="lists"]Lists[/heading]
You can create an unordered list using the [list]. The li element defines the list item.
[line_break/]
[heading size="h3" style="uk-module-title uk-padding-bottom"]Simple List[/heading]
[list]
[li]List Item 1[/li]
[li]List Item 2[/li]
[li]List Item 3[/li]
[/list][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[list]
[li]List Item 1
[/li]
[li]List Item 2
[/li]
[li]List Item 3
[/li]
[/list][/code]
[line_break/]
You can create lists with different style variations. E.g Lists with alternative stripes, lists with icons etc.
[line_break/]
[heading size="h3" style="uk-module-title uk-padding-bottom"]Lists with stripes[/heading]
[list style="uk-list-striped"]
[li]List Item 1[/li]
[li]List Item 2[/li]
[li]List Item 3[/li]
[/list]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[list style="uk-list-striped"]
[li]List Item 1
[/li]
[li]List Item 2
[/li]
[li]List Item 3
[/li]
[/list][/code]
[line_break/]
[heading size="h3" style="uk-module-title uk-padding-bottom"]Lists with icons[/heading]
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
[child_grid][column size="1-3"] [list style="list-icons"]
[li icon="asterisk"]Lorem ipsum dolor[/li]
[li icon="asterisk"]consectetur adipisicing elit[/li]
[li icon="asterisk"]sed do eiusmod tempor[/li]
[/list]
[/column]
[column size="1-3"]
[list style="list-icons"]
[li icon="circle-o"]Lorem ipsum dolor[/li]
[li icon="circle-o"]consectetur adipisicing elit[/li]
[li icon="circle-o"]sed do eiusmod tempor[/li]
[/list]
[/column]
[column size="1-3"]
[list style="list-icons"]
[li icon="check-square-o"]Lorem ipsum dolor[/li]
[li icon="check-square-o"]consectetur adipisicing elit[/li]
[li icon="check-square-o"]sed do eiusmod tempor[/li]
[/list]
[/column]
[/child_grid]
[child_grid]
[column size="1-3"]
[list style="list-icons"]
[li icon="folder-o"]Lorem ipsum dolor[/li]
[li icon="folder-o"]consectetur adipisicing elit[/li]
[li icon="folder-o"]sed do eiusmod tempor[/li]
[/list]
[/column]
[column size="1-3"]
[list style="list-icons"]
[li icon="info-circle"]Lorem ipsum dolor[/li]
[li icon="info-circle"]consectetur adipisicing elit[/li]
[li icon="info-circle"]sed do eiusmod tempor[/li]
[/list]
[/column]
[column size="1-3"]
[list style="list-icons"]
[li icon="check"]Lorem ipsum dolor[/li]
[li icon="check"]consectetur adipisicing elit[/li]
[li icon="check"]sed do eiusmod tempor[/li]
[/list]
[/column]
[/child_grid]
[child_grid][column size="1-3"]
[list style="list-icons"]
[li icon="chevron-right"]Lorem ipsum dolor[/li]
[li icon="chevron-right"]consectetur adipisicing elit[/li]
[li icon="chevron-right"]sed do eiusmod tempor[/li]
[/list]
[/column]
[column size="1-3"]
[list style="list-icons"]
[li icon="arrow-circle-right"]Lorem ipsum dolor[/li]
[li icon="arrow-circle-right"]consectetur adipisicing elit[/li]
[li icon="arrow-circle-right"]sed do eiusmod tempor[/li]
[/list]
[/column]
[column size="1-3"]
[list style="list-icons"]
[li icon="caret-right"]Lorem ipsum dolor[/li]
[li icon="caret-right"]consectetur adipisicing elit[/li]
[li icon="caret-right"]sed do eiusmod tempor[/li]
[/list]
[/column]
[/child_grid]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[list style="list-icons"]
[li icon="asterisk"]List Item 1
[/li]
[li icon="asterisk"]List Item 2
[/li]
[li icon="asterisk"]List Item 3
[/li]
[/list][/code]
[line_break/] [heading size="h3" style="uk-module-title uk-padding-top"]Nested Lists[/heading]
[list style="list-icons"]
[li icon="caret-right"]Lorem ipsum dolor[/li]
[li icon="caret-right"]consectetur adipisicing elit[/li]
[li icon="caret-right"]sed do eiusmod tempor[/li]
[nested_list]
[li icon="caret-right"]Lorem ipsum dolor[/li]
[li icon="caret-right"]consectetur adipisicing elit[/li]
[li icon="caret-right"]sed do eiusmod tempor[/li]
[/nested_list]
[li icon="caret-right"]dolor adipisicing elit[/li]
[/list]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[list style="list-icons"]
[li icon="asterisk"]List Item 1
[/li]
[li icon="asterisk"]List Item 2
[/li]
[nested_list]
[li icon="asterisk"]Child Item 1
[/li]
[li icon="asterisk"]Child Item 2
[/li]
[/nested_list]
[li icon="asterisk"]List Item 3
[/li]
[/list][/code]
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title"]Tags[/heading]
Tags can be used to highlight keywords within your content. To create a tag, use the [tag] shortcode
[line_break/]
[tag url="#"]Themeforest[/tag]
[tag url="#"]envato[/tag]
[tag url="#"]youtube[/tag]
[tag url="#"]action[/tag]
[tag url="#"]web design[/tag]
[line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[tag url="#"]Themeforest[/tag]
[tag url="#"]envato[/tag]
[tag url="#"]youtube[/tag]
[tag url="#"]web design[/tag][/code]
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title"]Ratings[/heading]
To create a rating review stars, use one of these rating shortcodes:
[line_break/]
| Shortcode | Description |
|---|
[five_star/] |
5 star rating |
[four_half_star/] |
4 and a half star rating |
[four_star/] |
4 star rating |
[three_star/] |
3 star rating |
[two_star/] |
2 star rating |
[one_star/] |
1 star rating |
[no_star/] |
blank star rating |
[line_break/]
[five_star/]
[four_half_star/]
[four_star/]
[three_star/]
[two_star/]
[one_star/]
[no_star/]
[line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[five_star/]
[four_half_star/]
[four_star/]
[three_star/]
[two_star/]
[one_star/]
[no_star/]
[/code]
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title" id="semantics"]Text level semantics[/heading]
| Element | Description |
|---|
<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
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title" id="classes"]Module Classes[/heading]
| Module Class | Description |
|---|
uk-panel-box-primary |
Change the module background to have the primary background; You can specify the primary background from the customizer panel. |
uk-panel-box-secondary |
Change the module background to have the secondary background; You can specify the secondary background from the customizer panel. |
tm-primary-background |
Change an element's background to have the primary background; You can specify the primary background from the customizer panel. |
tm-secondary-background |
Change an element's background to have the secondary background; You can specify the secondary background from the customizer panel. |
tm-primary-color |
Change an element's font color to have the primary color; You can specify the primary color from the customizer panel. |
tm-overlay-primary |
Add a primary overlay |
tm-overlay-secondary |
Add a secondary overlay |
tm-overlay-slider |
Add an overlay similar to the slider overlay |
tm-secondary-color |
Change an element's font color to have the secondary color; 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 |
tm-small-caps |
Set the module caption to be in capitalized words with letter spacing and a small font |
tm-padding |
Add extra padding to an element |
tm-padding-small-sides |
Add small padding on the side |
tm-inner-padding-large |
Add a large padding to the inner container. Used in conjuction with modules that have a background image |
tm-padding-remove |
Remove all padding on an element |
tm-text-large |
Add this class to make the text large |
tm-text-xlarge |
Add this class to make the text extra large |
tm-border-bottom |
Add this class to an image to add a bottom border |
tm-thin-font |
Add this class to make the font weight thinner |
[heading size="h2" style="uk-module-title"]Column Blocks[/heading]
Column grid is a robust layout that is both responsive and nestable. It can accomodate upto 10 columns by using pre-defined widths. The columns are fully responsive in all devices. The following table shows an overview of the shortcode sizes you can use to create columns:
| Class | Description |
|---|
[column size="1-1"] |
Fills 100% of the available width. |
[column size="1-2"] |
Divides the grid into halves. |
[column size="1-3"] to [column size="2-3"] |
Divides the grid into thirds. |
[column size="1-4"] to [column size="3-4"] |
Divides the grid into fourths. |
[column size="1-5"] to [column size="4-5"] |
Divides the grid into fifths. |
[column size="1-6"] to [column size="5-6"] |
Divides the grid into sixths. |
[column size="1-10"] to [column size="9-10"] |
Divides the grid into tenths. |
[grid_column size="4"] |
Divides the elements of a grid into the number of columns specified in the size attribute. e.g. in this case the grid will be divided into four. Options for the size attribute are 1, 2, 3, 4, 6 and 10. |
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-top"]Examples[/heading]
[child_grid]
[column size="1-2"]
[heading size="h3" style="uk-module-title"]One half[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column size="1-2"] [heading size="h3" style="uk-module-title"]One half[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column] [/child_grid]
[child_grid]
[column size="1-3"] [heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column size="1-3"] [heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column size="1-3"] [heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column] [/child_grid]
[child_grid]
[column size="1-4"] [heading size="h3" style="uk-module-title"]One fourth[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column size="1-4"] [heading size="h3" style="uk-module-title"]One fourth[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column size="1-4"] [heading size="h3" style="uk-module-title"]One fourth[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column size="1-4"] [heading size="h3" style="uk-module-title"]One fourth[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column] [/child_grid]
[child_grid]
[column size="2-10"] [heading size="h3" style="uk-module-title"]Two tenth[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
[/column]
[column size="5-10"] [heading size="h3" style="uk-module-title"]five tenth[/heading]
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.
[/column]
[column size="3-10"] [heading size="h3" style="uk-module-title"]Three tenth[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
[/column]
[/child_grid]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code]
[line_break/]
[code]
[grid_column size="3"]
[block style=""]
your content here
[/block]
[block style=""]
your content here
[/block]
[block style=""]
your content here
[/block]
[/grid_column]
[/code]
[line_break/]
note
To add a nested grid (grid within a grid,) use the [child_grid] shortcode
[badge style="note uk-margin-top"]markup[/badge]
[code]
[grid]
[child_grid]
...
[/child_grid]
[/grid][/code]
[line_break/]
[heading size="h2" style="uk-module-title"]Buttons[/heading]
To create a button, use the [button] shortcode and customize it using the various parameters available
| Parameter | Description | Parameters |
|---|
| Style |
Defines the button style or class |
default, line, primary, success, danger, link |
| href |
url link of the button |
n/a |
| Target |
specifies where to open the linked document |
_blank, _self, _parent, _top |
[line_break/] [heading size="h3" style="uk-module-title"]Examples[/heading]
[button style="default" href="#" target="_self"]Default link[/button]
[button_input style="primary" href="#" target="_self"]input button[/button_input]
[line_break/]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[button style="default" href="#" target="blank"]button
[/button]
[button_input style="primary" href="#" target="blank"]button
[/button_input]
[/code]
[line_break/]
[heading size="h3" style="uk-module-title"]Button variations[/heading]
[button style="default" href="#" target="_self"]Default[/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="line" href="#" target="_self"]Line[/button]
[button style="link" href="#" target="_self"]link[/button]
[line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[button style="default" href="#" target="_self"]default
[/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="line" href="#" target="_self"]line
[/button]
[button style="link" href="#" target="_self"]link
[/button]
[/code]
[line_break/]
[heading size="h3" style="uk-module-title"]Button sizes[/heading]
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
[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" size=""]default button[/button] [button style="color uk-button-large" href="#" target="_self"]Large button[/button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Button group[/heading]
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] [line_break/][line_break/] [button_group] [button style="color uk-button-small" href="#" target="_self"]bad[/button] [button style="color uk-button-small" href="#" target="_self"]average[/button] [button style="color uk-button-small" href="#" target="_self"]good[/button] [/button_group] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Button with icons[/heading]
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
[line_break/] [button style="color" href="#" target="_self"]complete [icon style="icon-check"/][/button] [button style="success" href="#" target="_self"]events list [icon style="icon-caret-down"/][/button] [button style="default" href="#" target="_self"][icon style="icon-camera"/] gallery[/button] [button style="link" href="#" target="_self"]Download [icon style="icon-cloud-download"/][/button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[button style="default" href="#" target="_self"]gallery
[icon style="icon-camera"/]
[/button][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Icon buttons[/heading]
You can create icon buttons using the [icon_button] shortcode. These can come in handy especially when creating social icons.
[line_break/] [icon_button icon="twitter" url="#" target="_self"][/icon_button] [icon_button icon="dribbble" url="#" target="_self"][/icon_button] [icon_button icon="facebook" url="#" target="_self"][/icon_button] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[icon_button icon="twitter" url="#" target="_self"][/icon_button]
[icon_button icon="dribbble" url="#" target="_self"][/icon_button]
[icon_button icon="facebook" url="#" target="_self"][/icon_button][/code]
[heading size="h2" style="uk-module-title"]Dropdowns[/heading]
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.
[heading size="h3" style="uk-module-title"]Button with dropdowns[/heading]
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=""]
[/nav] [/dropdown] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code]
[line_break/] [heading size="h3" style="uk-module-title"]Button group with dropdowns[/heading]
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="success" href="#" target="_self"]Button[/button] [dropdown style=""] [button style="success" href="#" target="_self"][icon style="icon-caret-down"/][/button] [nav style=""]
[/nav][/dropdown] [/button_group] [button_group] [button style="color" href="#" target="_self"]Button[/button] [dropdown style=""] [button style="color" href="#" target="_self"][icon style="icon-caret-down"/][/button] [nav style=""]
[/nav][/dropdown] [/button_group] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code]
[line_break/]
The following is a list of possible style options for the [nav] dropdown menu
| style | Description |
|---|
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 |
[badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code]
[line_break/]
[heading size="h2" style="uk-module-title"]Alerts[/heading]
To emphasize a point with an alert box, use the [alert] shortcode
[alert]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/alert] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[alert]Your alert message here
[/alert]
[/code]
[line_break/] [heading size="h3" style="uk-module-title"]Color variations[/heading]
You can change the color scheme of the alert box by adding the following styles: success, warning, or danger
[alert style="success"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/alert] [alert style="warning"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/alert] [alert style="danger"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/alert] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[alert style="success"]Your alert message here
[/alert]
[/code]
[line_break/] [heading size="h3" style="uk-module-title"]Closable alerts[/heading]
To add a close button to an alert, use the close-button parameter in the alert shortcode
[alert close-button style="success"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment[/alert] [alert close-button style="danger"]Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment[/alert] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[alert close-button style="danger"]Your alert message here
[/alert]
[/code]
[line_break/] [heading size="h3" style="uk-module-title"]Size modifier[/heading]
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="uk-module-title"]We are because of you[/heading]
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
[/alert] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code]
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title"]Badges[/heading]
You can use badges to highlight a segment of text within your content by using the [badge] shortcode
[badge]new[/badge] [badge]legend[/badge] [badge]note[/badge] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[badge]new
[/badge]
[/code]
[line_break/]
[heading size="h3" style="uk-module-title"]Color variations[/heading]
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][line_break/][line_break/]
[badge style="note uk-badge-notification"]1[/badge]
[badge style="note uk-badge-notification"]2[/badge]
[badge style="note uk-badge-notification"]3[/badge]
[badge style="note uk-badge-notification"]4[/badge]
[badge style="note uk-badge-notification"]5[/badge]
[line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code]
[heading size="h2" style="uk-module-title"]Panels[/heading]
Use the [panel_box] shortcode to create panels. You can also use the [panel] shortcode to create a panel box without a border.
[child_grid]
[column size="1-3"]
[panel_box][heading size="h3"]Panel Box[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
[/panel_box]
[/column]
[column size="1-3"] [panel] [heading size="h3"]Panel without borders[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel]
[/column]
[column size="1-3"]
[panel_box] [heading size="h3"]Panel Box[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel_box]
[/column]
[/child_grid]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[panel]
[heading size="h3"]Panel Title
[/heading]
Your content here
[/panel][/code]
[line_break/]
[badge style="danger"]important[/badge]
In each of these examples, we've nested the panel code within the column grids.
[line_break/]
[heading size="h3" style="uk-module-title"]Style modifiers[/heading]
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.
[line_break/] [child_grid] [column size="1-2"] [panel style="uk-panel-box-primary"] [heading size="h3" style="uk-panel-title"]Primary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [column size="1-2"] [panel style="uk-panel-box-secondary"] [heading size="h3" style="uk-panel-title"]Secondary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [/child_grid] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[panel style="uk-panel-box-primary"]
[heading size="h3" style="uk-panel-title"]Panel Title
[/heading]
Your content here
[/panel][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Panel title with Icons[/heading]
You can also add icons to the panels by using the [icon] shortcode right next to the header.
[line_break/] [child_grid] [column size="1-2"] [panel style="uk-panel-box-primary"] [heading size="h3" style="uk-panel-title"][icon style="icon-envelope-o"/] Primary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [column size="1-2"] [panel style="uk-panel-box-secondary"] [heading size="h3" style="uk-panel-title"][icon style="icon-gear"/] Secondary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [/child_grid] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code]
[line_break/]
[heading size="h2" style="uk-module-title"]Accordions[/heading]
To hide or show text in a retractable panel, use the [accordion] shortcode. You can switch between having a single open item or multiple open items by setting the collapse parameter to true or false.
[line_break/]
[heading size="h3" style="uk-module-title"]Single open item[/heading]
[accordion collapse="true"]
[accordion_panel title="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.[/accordion_panel]
[accordion_panel title="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.[/accordion_panel]
[accordion_panel title="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[/accordion_panel]
[/accordion][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[accordion collapse="true"]
[accordion_panel title="title"]your content here[/accordion_panel]
[accordion_panel title="title"]your content here[/accordion_panel]
[/accordion]
[/code][line_break/]
[heading size="h3" style="uk-module-title"]Multiple open items[/heading]
[accordion collapse="false"]
[accordion_panel title="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.[/accordion_panel]
[accordion_panel title="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.[/accordion_panel]
[accordion_panel title="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[/accordion_panel]
[/accordion][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[accordion collapse="false"]
[accordion_panel title="title"]your content here[/accordion_panel]
[accordion_panel title="title"]your content here[/accordion_panel]
[/accordion]
[/code]
[line_break/]
[divider/]
[line_break/]
[heading size="h2" style="uk-module-title"]Toggles[/heading]
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 'open' option to true; To have the toggle closed by default, set the 'open' option to false
[heading size="h3" style="uk-module-title"]open toggle[/heading] [toggle open="true" title="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] [badge style="note uk-margin-top"]markup[/badge]
[code]
[toggle open="true" title="Your toggle title here"]Your toggle content here[/toggle][/code][line_break/]
[heading size="h3" style="uk-module-title"]closed toggle[/heading]
[toggle open="false" title="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][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[toggle open="false" title="Your toggle title here"]Your toggle content here[/toggle][/code][line_break/]
[heading size="h3" style="uk-module-title"]Toggle with code[/heading]
You can also use the toggles to show/hide code snippets by wrapping the content with <code>
[toggle_code open="false" title="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_code]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[toggle_code open="false" title="Show code"]Your toggle code here[/toggle_code][/code][line_break/]
[heading size="h2" style="uk-module-title"]Tooltips[/heading]
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.
[line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]<a class="uk-icon-dribbble" data-uk-tooltip href="http://dribbble.com/arrowthemes" target="blank" title="dribbble"></a>[/code]
[line_break/] [heading size="h3" style="uk-module-title"]Tooltip position[/heading]
You can specify the position of the tooltip by adding one of the following options to the data-uk-tooltip attribute
| Options | Description |
|---|
pos:'top' |
Aligns the tooltip to the top. |
pos:'top-left' |
Aligns the tooltip to the top left. |
pos:'top-right' |
Aligns the tooltip to the top right. |
pos:'bottom' |
Aligns the tooltip to 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. |
[line_break/]
[line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]<a class="uk-icon-dribbble" data-uk-tooltip="{pos: 'bottom'}" href="http://dribbble.com/arrowthemes" target="blank" title="dribbble"></a>[/code]
[heading size="h2" style="uk-module-title"]Progress bar[/heading]
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:
[line_break/]
| Options | Description |
|---|
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 |
[line_break/] [heading size="h3" style="uk-module-title"]Simple progress bar[/heading] [progress style="" width=40][/progress] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[progress style="" width=40]
[/progress][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Size modifiers [/heading] [progress style="uk-progress-mini" width=40][/progress] [progress style="uk-progress-small" width=50][/progress] [progress style="" width=60][/progress] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[progress style="uk-progress-mini" width=40]
[/progress]
[progress style="uk-progress-small" width=50]
[/progress]
[progress style="" width=60]
[/progress][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Colored progress bars[/heading] [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] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code]
[line_break/] [heading size="h3" style="uk-module-title"]Combined options[/heading] [progress style="uk-progress-success uk-progress-striped uk-active" width=45]loading...[/progress] [line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[progress style="uk-progress-success uk-progress-striped uk-active" width=45]loading...
[/progress][/code]
[heading size="h2" style="uk-module-title"]Tabs[/heading]
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.
[line_break/]
[heading size="h3" style="uk-module-title"]Horizontal tabs[/heading]
[line_break/]
[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"]
[heading size="h3" style="uk-module-title"]This is the first tab[/heading]
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.
[heading size="h3" style="uk-module-title"]This is the second tab[/heading]
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.
[heading size="h3" style="uk-module-title"]This is the third tab[/heading]
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_content]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code][line_break/]
[heading size="h3" style="uk-module-title"]Vertical tabs[/heading]
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.
[line_break/]
[tab_grid]
[column size="2-10"]
[tab_left tab_content_id="tabs_example2"]
[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_example2"]
[heading size="h3" style="uk-module-title"]This is the first tab[/heading]
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.
[heading size="h3" style="uk-module-title"]This is the second tab[/heading]
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.
[heading size="h3" style="uk-module-title"]This is the third tab[/heading]
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_content]
[/column]
[/tab_grid]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[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]
[/code]
[heading size="h2" style="uk-module-title"]Tables[/heading]
[alert style="danger"]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.[/alert]
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 |
[toggle_code open="false" title="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>[/toggle_code]
[heading size="h3" style="uk-module-title"]Style variation[/heading]
You can add more styling to the table by using a combination of classes to improve the visual appearance of your table
| [icon style="icon-gear"/] Settings |
[icon style="icon-leaf"/] Productivity |
[icon style="icon-usd"/] 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 |
[line_break/]
[toggle_code open="false" title="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>[/toggle_code]
[line_break/]
You can view more examples and classes that you can use from here
[heading size="h2" style="uk-module-title"]Images[/heading]
To create an image, use the image shortcode. You can use the [thumbnail_caption] shortcode to apply a caption under an image.
| Style | Description |
|---|
uk-thumbnail |
creates a border around the image |
uk-border-rounded |
creates an image with rounded corners |
uk-border-circle |
creates an image which is round |
uk-thumbnail-expand |
Makes the image fill the entire width of the parent container |
[line_break/][line_break/]
[heading size="h3" style="uk-module-title"]Image with thumbnail style[/heading] [line_break/]
[image style="uk-thumbnail" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/][line_break/]
[line_break/]
[badge style="note"]markup[/badge]
[code]
[image style="uk-thumbnail" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/][/code]
[line_break/]
[heading size="h3" style="uk-module-title"]Image with rounded corners style[/heading]
[line_break/]
[image style="uk-border-rounded" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/][line_break/]
[line_break/][line_break/]
[badge style="note"]markup[/badge]
[code]
[image style="uk-border-rounded" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/][/code]
[line_break/]
[heading size="h3" style="uk-module-title"]Image in circle[/heading]
[line_break/]
[image style="uk-border-circle" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/][line_break/]
[line_break/][line_break/]
[badge style="note"]markup[/badge]
[code]
[image style="uk-border-circle" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/][/code]
[line_break/]
[heading size="h3" style="uk-module-title"]Image with caption[/heading]
You can use the [thumbnail_caption] shortcode to apply a caption under the image.
[thumbnail_caption caption="image caption"]
[image style="" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/]
[/thumbnail_caption]
[line_break/]
[line_break/] [badge style="note"]markup[/badge]
[code]
[thumbnail_caption caption="image caption"]
[image style="" src="/images/demo/gallery/2.jpg" alt="sample_1" width="250" height="250"/]
[/thumbnail_caption][/code]
You can view more examples and classes that you can use from here
[heading size="h2" style="uk-module-title"]Modal Box[/heading]
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.
[line_break/]
| target | Description |
|---|
modal-a |
show modal box for modules in modal-a position |
modal-b |
show modal box for modules in modal-b position |
modal-c |
show modal box for modules in modal-c position |
[line_break/]
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.
[heading size="h3" style="uk-module-title"]Size modifier[/heading]
To adjust the size (width) of the modal box, add uk-modal-dialog-small or uk-modal-dialog-large to the Module Class of the module.
[line_break/]
[heading size="h3" style="uk-module-title"]Trigger a modal box from link[/heading][line_break/]
[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] [line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code][line_break/]
[heading size="h3" style="uk-module-title"]Toggle modal box from buttons[/heading][line_break/]
[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][line_break/][line_break/] [badge style="note uk-margin-top"]markup[/badge]
[code]
[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][/code][line_break/]
[heading size="h3" style="uk-module-title"]Toggle modal box for inline content[/heading]
The [modal_box] shortcode can also be used for inline content by using the following sytnax:
[badge style="note uk-margin-top"]markup[/badge]
[code]<!-- 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][/code][line_break/]
[modal_box button style="color" target="mycontent"]Popup content[/modal_box] [modal_box content target="mycontent" style="uk-panel-box-primary"] [heading size="h3" style="uk-module-title"]Inline content[/heading]
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.
[line_break/][/modal_box]
[heading size="h2" style="uk-module-title"]Lightbox[/heading]
Use the [lighbox] shortcode to show a popup box with an image. The lightbox utilizes the modal component to load images and videos to fit the entire modal box. You can configure the lightbox images to scroll through a gallery by setting the group parameter.
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-bottom"]Toggle lightbox from button[/heading]
[lightbox src="/images/demo/gallery/2.jpg" title="Blown away" group="porfolio1" style="uk-button"]View image[/lightbox][line_break/][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[code]
[lightbox src="/images/demo/gallery/2.jpg" title="Title" group="" style="uk-button"]View image[/lightbox][/code][line_break/]
[heading size="h3" style="uk-module-title"]Using the lightbox in a gallery[/heading][line_break/]
[grid]
[column size="1-4"]
[lightbox src="/images/demo/gallery/2.jpg" title="Blown away" group="gallery1" style=""]
[/lightbox]
[/column]
[column size="1-4"]
[lightbox src="/images/demo/gallery/2.jpg" title="Spectacular" group="gallery1" style=""]
[/lightbox]
[/column]
[column size="1-4"]
[lightbox src="/images/demo/gallery/2.jpg" title="Unlock the door" group="gallery1" style=""]
[/lightbox]
[/column]
[/grid][line_break/]
[toggle_code open="false" title="Show code"]
[grid]
[column size="1-3"]
[lightbox src="/images/demo/gallery/2.jpg" title="title" group="group name" style=""]<img src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image">[/lightbox]
[/column]
[column size="1-3"]
[lightbox src="/images/demo/gallery/2.jpg" title="title" group="group name" style=""]<img src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image">[/lightbox]
[/column]
[column size="1-3"]
[lightbox src="/images/demo/gallery/2.jpg" title="title" group="group name" style=""]<img src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image">[/lightbox]
[/column]
[/grid]
[/toggle_code]
[line_break/]
[heading size="h3" style="uk-module-title"]Adding an overlay[/heading]
To add an overlay icon to an image, use the [overlay_icon] shortcode
. The
[overlay_panel] shortcode can be used to place an overlay panel that appears on hover. The
position parameter crops and places the overlay panel to one side.[line_break/]
| animation |
Description |
|---|
slide-top |
slide the overlay panel in from the top |
slide-bottom |
slide the overlay panel in from the bottom |
slide-left |
slide the overlay panel in from the left |
slide-right |
slide the overlay panel in from the right |
fade |
fade in the overlay panel |
[line_break/]
The following positions can be used with the [overlay_panel] shortcode.
| position |
Description |
|---|
top |
align the overlay panel to the top |
bottom |
align the overlay panel to the bottom |
left |
align the overlay panel to the left |
right |
align the overlay panel to the right |
[line_break/]
[grid]
[column size="1-4"]
[lightbox src="/images/demo/gallery/2.jpg" title="Blown away" group="gallery2" style=""]
[overlay_icon]
[image style="uk-thumbnail" src="/images/demo/gallery/2.jpg" alt="image" width="605" height="605"/]
[/overlay_icon]
[/lightbox]
[/column]
[column size="1-4"]
[lightbox src="/images/demo/gallery/2.jpg" title="Spectacular" group="gallery2" style=""]
[overlay_panel animation="slide-top" style="" caption="Good things happen to those who work" position="top"]
[image style="uk-thumbnail" src="/images/demo/gallery/2.jpg" alt="image" width="605" height="605"/]
[/overlay_panel]
[/lightbox]
[/column]
[column size="1-4"]
[lightbox src="/images/demo/gallery/2.jpg" title="Unlock the door" group="gallery2" style=""]
[overlay_panel animation="slide-bottom" style="" caption="Good things happen to those who work" position="bottom"]
[image style="uk-thumbnail uk-overlay-scale" src="/images/demo/gallery/2.jpg" alt="image" width="605" height="605"/]
[/overlay_panel]
[/lightbox]
[/column]
[/grid][line_break/]
[toggle_code open="false" title="Show code"]
[grid]
[column size="1-3"]
[lightbox src="/images/demo/gallery/2.jpg" title="Blown away" group="gallery2" style=""]
[overlay_icon]
[image style="uk-thumbnail" src="/images/demo/gallery/2.jpg" title="image" width="605" height="605"/]
[/overlay_icon]
[/lightbox]
[/column]
[column size="1-3"]
[lightbox src="/images/demo/gallery/2.jpg" title="Spectacular" group="gallery2" style=""]
[overlay_panel animation="slide-top" style="" caption="Good things happen to those who work" position="top"]
[image style="uk-thumbnail" src="/images/demo/gallery/2.jpg" title="image" width="605" height="605"/]
[/overlay_panel]
[/lightbox]
[/column]
[column size="1-3"]
[lightbox src="/images/demo/gallery/2.jpg" title="Unlock the door" group="gallery2" style=""]
[overlay_panel animation="slide-bottom" style="" caption="Good things happen to those who work" position="bottom"]
[image style="uk-thumbnail uk-overlay-scale" src="/images/demo/gallery/2.jpg" title="image" width="605" height="605"/]
[/overlay_panel]
[/lightbox]
[/column]
[/grid]
[/toggle_code]
[heading size="h2" style="uk-module-title"]Slideshow[/heading]
Use the [slideshow] shortcode to show images with nice transitions. To make a slideshow fill the entire page, use the the [full_slideshow] shortcode. The following parameters can be used with the [slideshow] and [full_slideshow] shortcodes.
[line_break/]
[toggle_code open="false" title="Show code"][slideshow style="recover" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="false"]
<!-- slide 1 -->
[slide]
[slider_img src="/images/demo/default/slider/1.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]This is a title[/heading]
[slide_text]Lorem ipsum dolor amit[/slide_text]
[/slide_caption]
[/slide]
<!-- slide 2 -->
[slide]
[slider_img src="/images/demo/default/slider/2.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]Another title[/heading]
[slide_text]Lorem ipsum dolor amit[/slide_text]
[/slide_caption]
[/slide]
<!-- slide navigation -->
[slide_nav position="top" align="left"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[/slide_nav]
[/slideshow][/toggle_code]
The following are the parameters required when using the [slideshow] or [full_slideshow] shortcodes:
| Parameters |
Description |
|---|
style |
Defines the slideshow style. This parameter cannot be left blank. You can set the style as default or recover |
autoplay |
Set it to true to have the slideshow play automatically. Otherwise, set to false to stop the automatic play. |
animation |
Set the transition animation between slides |
transition_duration |
set the duration for the transition animation |
autoplay_interval |
Set the duration between switching slideshow items |
kenburns |
Set it to true or false to enable/disable kenburns effect to an image |
[line_break/]
See the UIkit documentation on the available animations available for the slideshow component
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-top"]Default Slideshow[/heading]
[slideshow style="default" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="false"]
[slide][slider_img src="/images/demo/default/slider/1.jpg" width="1200" height="500" alt="image"/][/slide]
[slide][slider_img src="/images/demo/default/slider/2.jpg" width="1200" height="500" alt="image"/][/slide]
[slide][slider_img src="/images/demo/default/slider/3.jpg" width="1200" height="500" alt="image"/][/slide]
[slide_nav align="center"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[slide_nav_item order="2"/]
[/slide_nav]
[/slideshow]
[badge style="note uk-margin-top"]markup[/badge]
[toggle_code open="false" title="Show code"]
[slideshow style="default" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="false"]
[slide]
[slider_img src="/images/demo/default/slider/1.jpg" width="1200" height="500" alt="image"/][/slide]
[slide]
[slider_img src="/images/demo/default/slider/2.jpg" width="1200" height="500" alt="image"/][/slide]
[slide]
[slider_img src="/images/demo/default/slider/3.jpg" width="1200" height="500" alt="image"/][/slide]
[slide_nav align="center"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[slide_nav_item order="2"/]
[/slide_nav]
[/slideshow]
[/toggle_code]
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-top"]Recover Slideshow[/heading]
[slideshow style="recover" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="true"]
[slide]
[slider_img src="/images/demo/default/slider/1.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]This is a title[/heading]
[slide_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/slide_text]
[button style="default uk-button-large" href="#" target="_self"]Learn more[/button]
[/slide_caption]
[/slide]
[slide]
[slider_img src="/images/demo/default/slider/2.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]Another title[/heading]
[slide_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/slide_text]
[button style="default uk-button-large" href="#" target="_self"]Learn more[/button]
[/slide_caption]
[/slide]
[slide]
[slider_img src="/images/demo/default/slider/3.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]A simple title[/heading]
[slide_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/slide_text]
[button style="default uk-button-large" href="#" target="_self"]Learn more[/button]
[/slide_caption]
[/slide]
[slide_nav align="right"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[slide_nav_item order="2"/]
[/slide_nav]
[/slideshow]
[badge style="note uk-margin-top"]markup[/badge]
[toggle_code open="false" title="Show code"]
[slideshow style="recover" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="true"]
[slide]
[slider_img src="/images/demo/default/slider/1.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]This is a title[/heading]
[slide_text]Lorem ipsum dolor amit[/slide_text]
[button style="default uk-button-large" href="#" target="_self"]Learn more[/button]
[/slide_caption]
[/slide]
[slide]
[slider_img src="/images/demo/default/slider/2.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]Another title[/heading]
[slide_text]Lorem ipsum dolor amit[/slide_text]
[button style="default uk-button-large" href="#" target="_self"]Learn more[/button]
[/slide_caption]
[/slide]
[slide]
[slider_img src="/images/demo/default/slider/3.jpg" width="1200" height="500" alt="image"/]
[slide_caption animation="slide-left"]
[heading size="h3"]A simple title[/heading]
[slide_text]Lorem ipsum dolor amit[/slide_text]
[button style="default uk-button-large" href="#" target="_self"]Learn more[/button]
[/slide_caption]
[/slide]
[slide_nav align="right"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[slide_nav_item order="2"/]
[/slide_nav]
[/slideshow]
[/toggle_code]
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-top"]Testimonials in slideshow[/heading]
[slideshow style="scroller" autoplay="true" animation="scroll" transition_duration="500" autoplay_interval="10000" kenburns="false"]
[slide]
[testimonial author="Gary Long" title="CEO" avatar="images/demo/avatar/client-1-thumb.png" icon="comment-o"]Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.[/testimonial]
[/slide]
[slide]
[testimonial author="Lori Carroll" title="Chief Editor" avatar="images/demo/avatar/client-2-thumb.png" icon="comment-o"]Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one's definition.[/testimonial]
[/slide]
[slide]
[testimonial author="Paul Morgan" title="Creative Designer" avatar="images/demo/avatar/client-3-thumb.png" icon="comment-o"]Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.[/testimonial]
[/slide]
[slide_nav align="center"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[slide_nav_item order="2"/]
[/slide_nav]
[/slideshow][line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[toggle_code open="false" title="Show code"]
[slideshow style="scroller" autoplay="true" animation="scroll" transition_duration="500" autoplay_interval="10000" kenburns="false"]
[slide]
[testimonial author="Gary Long" title="CEO" avatar="images/demo/avatar/client-1-thumb.png" icon="comment-o"]Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.[/testimonial]
[/slide]
[slide]
[testimonial author="Lori Carroll" title="Chief Editor" avatar="images/demo/avatar/client-2-thumb.png" icon="comment-o"]Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one's definition.[/testimonial]
[/slide]
[slide]
[testimonial author="Paul Morgan" title="Creative Designer" avatar="images/demo/avatar/client-3-thumb.png" icon="comment-o"]Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.[/testimonial]
[/slide]
[slide_nav align="center"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[slide_nav_item order="2"/]
[/slide_nav]
[/slideshow]
[/toggle_code]
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-top"]Slideshow Panel[/heading]
[slideshow_panel id="1" style="recover" slide-width="1-2" animation="swipe"]
[slide][slider_img src="/images/demo/default/content/content-1.jpg" width="650" height="420" alt="demo"/][/slide]
[slide][slider_img src="/images/demo/default/content/content-2.jpg" width="650" height="420" alt="demo"/][/slide]
[/slideshow_panel]
[slide_panel_nav align="bottom"]
[slide_nav_item order="0"/]
[slide_nav_item order="1"/]
[/slide_panel_nav]
[slideshow_panel_content id="1" content-width="1-2"]
[slide_panel_item title="We provide timely support" link="#"]
Do not dwell in the past, do not dream of the future. Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future. Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.[/slide_panel_item]
[slide_panel_item title="We keep our word" link="#"]Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future. Do not dwell in the past, do not dream of the future. Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.[/slide_panel_item]
[/slideshow_panel_content]
[line_break/]
[badge style="note uk-margin-top"]markup[/badge]
[toggle_code open="false" title="Show code"]
[slideshow_panel id="1" style="recover" slide-width="1-2" animation="swipe"]
[slide]
[slider_img src="/images/demo/default/content/content-1.jpg" width="650" height="420" alt="demo"/]
[/slide]
[slide]
[slider_img src="/images/demo/default/content/content-2.jpg" width="650" height="420" alt="demo"/]
[/slide]
[/slideshow_panel]
[slide_panel_nav align="bottom"]
[slide_nav_item order="0"/]
[/slide_nav_item]
[slide_nav_item order="1"/]
[/slide_nav_item]
[/slide_panel_nav]
[slideshow_panel_content id="1" content-width="1-2"]
[slide_panel_item title="We provide timely support" link="#"]
Do not dwell in the past, do not dream of the future. Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future. Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.
[/slide_panel_item]
[slide_panel_item title="We keep our word" link="#"]Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future. Do not dwell in the past, do not dream of the future. Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.
[/slide_panel_item]
[/slideshow_panel_content][/toggle_code]
[heading size="h2" style="uk-module-title"]Dynamic Grid[/heading]
To create a filterable portfolio grid, use the [dynamic_grid] shortcode. The id must be unique for each portfolio grid. Use the [grid_filter] shortcode to create filters for the grid. The [grid_filter] shortcode can be placed in a different module position. the tag parameter defines the filters of the grid.
[line_break/]
| Parameters |
Description |
|---|
id |
A unique id that identifies a dynamic grid |
tag |
Defines the filters for the dynamic grid. |
animation |
set the animation for the portfolio items |
[line_break/]
[grid_filters id="grid1"]
[filter_button_active tag=""]all[/filter_button]
[filter_button tag="photography"]Photography[/filter_button]
[filter_button tag="webdesign"]Web Design[/filter_button]
[filter_button tag="illustration"]Illustration[/filter_button]
[filter_button tag="media"]Media[/filter_button]
[/grid_filters]
[dynamic_grid id="grid1" columns="4" gutter="10" style=""]
[grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="photography" animation="scale" style=""]
[overlay_content title="Photo effects" animation="fade" style=""]
Design is not what it looks like; Design is how it works. Good design speaks volumes about the designer
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="webdesign" animation="scale" style=""]
[overlay_content title="Ride the trail" animation="fade" style=""]
Good things come, not to the fast, but to those who wait.
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="illustration" animation="scale" style=""]
[overlay_content title="Read everyday" animation="" style="uk-ignore"]
if you first get to know who you are and are willing to work with a power that is greater than ourselves to do it
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="media" animation="scale" style=""]
[overlay_content title="Blown away" animation="fade" style=""]
Always continue the climb. It is possible for you to do whatever you choose
[/overlay_content]
[/grid_image]
[/dynamic_grid]
[toggle_code open="false" title="Show code"]<!-- grid filters -->
[grid_filters id="grid1"]
[filter_button_active tag=""]all[/filter_button]
[filter_button tag="photography"]Photography[/filter_button]
[/grid_filters]
<!-- grid items -->
[dynamic_grid id="grid1" columns="4" gutter="10" style=""]
[grid_image src="/images/demo/gallery/1.jpg" width="605" height="605" alt="image" tag="photography" animation="scale" style=""]
[overlay_content title="Title" animation="fade" style=""]
<p>Content goes here</p>
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/2.jpg" width="605" height="605" alt="image" tag="webdesign" animation="scale" style=""]
[overlay_content title="title" animation="fade" style=""]
<p>Content goes here</p>
[/overlay_content]
[/grid_image]
[grid_image src="/images/demo/gallery/3.jpg" width="605" height="605" alt="image" tag="webdesign" animation="scale" style=""]
[overlay_content title="title" animation="" style="uk-ignore"]
<p>Content goes here</p>
[/overlay_content]
[/grid_image]
[/dynamic_grid]
[/toggle_code]
[heading size="h2" style="uk-module-title"]Animation[/heading]
To add animation to any component, use the [animate] shortcode. To learn more about the animation classes, visit the animation component page.
[line_break/]
[badge style="note"]markup[/badge]
[code]
[animate animation="fade" delay="100"]
your elements here
[/animate]
[/code]
[line_break/]
The [animate] shortcode parameters are as follows:
| Parameters |
Description |
|---|
animation |
Set the animation type. The animation options can be: slide-top, slide-bottom, slide-left, slide-right, fade, scale-up, scale-down |
delay |
Set the animation delay in milliseconds. E.g 200 |
[line_break/]
[heading size="h3" style="uk-module-title"]Example[/heading]
[line_break/]
[grid]
[column size="1-3"]
[animate animation="slide-bottom" delay="100"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[column size="1-3"]
[animate animation="slide-bottom" delay="300"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[column size="1-3"]
[animate animation="slide-bottom" delay="500"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[/grid]
[line_break/]
[toggle_code open="false" title="Show code"]
[grid]
[column size="1-3"]
[animate animation="slide-bottom" delay="100"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[column size="1-3"]
[animate animation="slide-bottom" delay="300"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[column size="1-3"]
[animate animation="slide-bottom" delay="500"]
[heading size="h3" style="uk-module-title"]One third[/heading]
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/animate]
[/column]
[/grid]
[/toggle_code]
[heading size="h2" style="uk-module-title"]Counter[/heading]
Use the [counter] to show a counter of numbers that starts numerating from 0 to a specified number that you set via the count_end parameter. The id can be any text but it must be unique for each counter. The duration parameter defines how long the counter should run in milliseconds. Use any icon class from this page in the icon parameter to add an icon to the counter.
[line_break/]
[grid_column size="4"]
[counter id="tm1" count_end="12" duration="4000" icon="chat" title="Projects done"][/counter]
[counter id="tm2" count_end="65" duration="3000" icon="7s-coffee" title="Cups of coffee"][/counter]
[counter id="tm3" count_end="9300" duration="2000" icon="7s-note" title="Lines of code"][/counter]
[counter id="tm4" count_end="140" duration="2500" icon="area-chart" title="Web pages"][/counter]
[/grid_column]
[line_break/]
[badge style="note"]markup[/badge]
[code]
[counter id="tm1" count_end="12" duration="4000" icon="chat" title="Projects done"]
[/counter][/code]
[line_break/]
To add the counter to a number, use the [counter_simple] shortcode. You can also add a percentage at the end of the number by using the tm-counter-percent class.
[line_break/]
[badge style="note"]markup[/badge]
[code]
[counter_simple id="tm5" count_end="99" duration="2500" style=""][/counter_simple][/code]
[line_break/]
[heading size="h3"]Example[/heading]
[counter_simple id="tm6" count_end="97" duration="4000" style="tm-text-xlarge tm-counter-percent"][/counter_simple]
[badge style="note"]markup[/badge]
[code]
[counter_simple id="tm6" count_end="97" duration="4000" style="tm-text-xlarge tm-counter-percent"][/counter_simple][/code]
[line_break/]
[heading size="h2" style="uk-module-title"]Circle Charts[/heading]
Circle charts are a nice way to illustrate data points. Use the [chart] shortcode to generate a circle chart.
| Parameters |
Description |
|---|
percent |
Set the end percent of the chart |
size |
Defines the size of the chart. |
border |
set the width of the animated part of the chart |
style |
set the color of the chart. The style options are default, success, warning, danger |
[badge style="note"]markup[/badge]
[code]
[chart percent="85" size="200" border="15" style="default"][/chart]
[/code][line_break/]
[grid]
[column size="1-4"]
[chart percent="85" size="200" border="15" style="default"][/chart]
[heading size="h3" style="uk-text-center"]Skills[/heading]
[/column]
[column size="1-4"]
[chart percent="70" size="200" border="15" style="success"][/chart]
[heading size="h3" style="uk-text-center"]Design[/heading]
[/column]
[column size="1-4"]
[chart percent="75" size="200" border="15" style="warning"][/chart]
[heading size="h3" style="uk-text-center"]Photoshop[/heading]
[/column]
[column size="1-4"]
[chart percent="90" size="200" border="15" style="danger"][/chart]
[heading size="h3" style="uk-text-center"]Coding[/heading]
[/column]
[/grid]
[line_break/]
[badge style="note"]markup[/badge]
[toggle_code open="false" title="Show code"]
[grid]
[column size="1-4"]
[chart percent="85" size="200" border="15" style="default"]
[/chart]
[heading size="h3" style="uk-text-center"]Skills
[/heading]
[/column]
[column size="1-4"]
[chart percent="70" size="200" border="15" style="success"]
[/chart]
[heading size="h3" style="uk-text-center"]Design
[/heading]
[/column]
[column size="1-4"]
[chart percent="75" size="200" border="15" style="warning"]
[/chart]
[heading size="h3" style="uk-text-center"]Design
[/heading]
[/column]
[column size="1-4"]
[chart percent="90" size="200" border="15" style="danger"]
[/chart]
[heading size="h3" style="uk-text-center"]Design
[/heading]
[/column]
[/grid][/toggle_code]
[heading size="h2" style="uk-module-title"]Slider[/heading]
To create a slideset of panels with filters, use the [slider] shortcode. The settings attribute can be used configure the parameters of the slider. See this table for all the available settings options.
[line_break/]
| Parameter |
Description |
|---|
default |
Number of default visible in a slide set |
small |
Number of visible in a slide set at small breakpoint i.e. when viewed on a phone |
medium |
Number of visible in a slide set at medium breakpoint i.e. when viewed on a tablet |
large |
Number of visible in a slide set at large breakpoint i.e. when viewed on a laptop/desktop |
xlarge |
Number of visible in a slide set at extra large breakpoint i.e. when viewed on a large screen |
[line_break/]
The slideset allows you to set different filters by using the [slider_filters] shortcode.
[badge style="note"]markup[/badge]
[code]
[slider_filters]
[filter_button style="uk-active" tag=""]All
[/filter_button]
[filter_button style="uk-active" tag="design"]design
[/filter_button]
[filter_button style="uk-active" tag="mockup"]mockup
[/filter_button]
[/slider_filters]
[/code]
[line_break/]
[slider style="tm-slideset-recover" settings="default: 1,small: 2,medium: 2,large: 3, xlarge: 3" animation="slide-horizontal"]
[slider_filters]
[filter_button tag=""]All[/filter_button]
[filter_button tag="interior"]Interior[/filter_button]
[filter_button tag="building"]Buildings[/filter_button]
[filter_button tag="family-house"]Family House[/filter_button]
[filter_button tag="green-building"]Green Building[/filter_button]
[filter_button tag="office"]office[/filter_button]
[/slider_filters]
[slideset title="Business Center" tag="building,green-building" src="/images/demo/projects/1.jpg" large_src="images/demo/projects/1-large.jpg" width="480" height="480" url=""/]
[slideset title="Office Building" tag="building,office" src="/images/demo/projects/2.jpg" large_src="images/demo/projects/2-large.jpg" width="480" height="480" url=""/]
[slideset title="Family House" tag="family-house,interior" src="/images/demo/projects/3.jpg" large_src="images/demo/projects/3-large.jpg" width="480" height="480" url=""/]
[slideset title="Leisure center" tag="family-house,green-building" src="/images/demo/projects/4.jpg" large_src="images/demo/projects/4-large.jpg" width="480" height="480" url=""/]
[slideset title="Entertainment Center" tag="building,office" src="/images/demo/projects/5.jpg" large_src="images/demo/projects/5-large.jpg" width="480" height="480" url=""/]
[slideset title="Modern Building" tag="building,family-house" src="/images/demo/projects/6.jpg" large_src="images/demo/projects/6-large.jpg" width="480" height="480" url=""/]
[slideset title="Shopping Mall" tag="family-house,interior,office" src="/images/demo/projects/7.jpg" large_src="images/demo/projects/7-large.jpg" width="480" height="480" url=""/]
[slideset title="Storage" tag="building,green-building" src="/images/demo/projects/8.jpg" large_src="images/demo/projects/8-large.jpg" width="480" height="480" url=""/]
[slideset title="Office Building" tag="building,office" src="/images/demo/projects/9.jpg" large_src="images/demo/projects/9-large.jpg" width="480" height="480" url=""/]
[slideset title="Business center" tag="green-building" src="/images/demo/projects/10.jpg" large_src="images/demo/projects/10-large.jpg" width="480" height="480" url=""/]
[/slider]
[line_break/]
[toggle_code open="false" title="Show code"]
[slider style="tm-slideset-recover" settings="default: 1,small: 2,medium: 2,large: 3, xlarge: 3" animation="slide-horizontal"]
[slider_filters]
[filter_button tag=""]All
[/filter_button]
[filter_button tag="interior"]Interior
[/filter_button]
[filter_button tag="building"]Buildings
[/filter_button]
[filter_button tag="family-house"]Family House
[/filter_button]
[filter_button tag="green-building"]Green Building
[/filter_button]
[filter_button tag="office"]office
[/filter_button]
[/slider_filters]
[slideset title="Business Center" tag="building,green-building" src="/images/demo/projects/1.jpg" large_src="images/demo/projects/1-large.jpg" width="480" height="480" url=""/]
[slideset title="Office Building" tag="building,office" src="/images/demo/projects/2.jpg" large_src="images/demo/projects/2-large.jpg" width="480" height="480" url=""/]
[slideset title="Family House" tag="family-house,interior" src="/images/demo/projects/3.jpg" large_src="images/demo/projects/3-large.jpg" width="480" height="480" url=""/]
[slideset title="Leisure center" tag="family-house,green-building" src="/images/demo/projects/4.jpg" large_src="images/demo/projects/4-large.jpg" width="480" height="480" url=""/]
[/slider]
[/toggle_code]
[heading size="h2" style="uk-module-title"]Parallax[/heading]
To create a parallax effect on an image, use the [parallax_image] shortcode.
[line_break/]
[badge style="note"]markup[/badge]
[code]
[parallax_image img="images/background/bg-image-1.jpg" height="350" style="uk-text-center uk-contrast uk-flex uk-flex-middle uk-flex-center" options="bg: '-200'"]
your elements here
[/parallax_image]
[/code]
[line_break/]
To create the parallax effect on an element, use the [parallax] shortcode. To learn more about all the options attribute, see this table
[line_break/]
[badge style="note"]markup[/badge]
[code]
[parallax options="opacity: '1,0', y: '-50'"]your elements here[/parallax]
[/code]
[line_break/]
[parallax_image img="images/background/bg-image-1.jpg" height="350" style="uk-text-center uk-contrast uk-flex uk-flex-middle uk-flex-center" options="bg: '-200'"]
[parallax options="opacity: '0,1', scale: '0.75,1', viewport: '0.5'"]
[heading size="h1" style="uk-module-title-alt uk-margin-top"]Title here[/heading]
[heading size="h3" style="uk-sub-title"]Sub title goes here[/heading]
[/parallax]
[/parallax_image]
[line_break/]
[badge style="note"]markup[/badge]
[code]
[parallax_image img="images/background/bg-image-1.jpg" height="350" style="uk-text-center uk-contrast uk-flex uk-flex-middle uk-flex-center" options="bg: '-200'"]
[parallax options="opacity: '0,1', scale: '0.75,1', viewport: '0.5'"]
[heading size="h1" style="uk-module-title-alt uk-margin-top"]Title here[/heading]
[heading size="h3" style="uk-sub-title"]Sub title goes here[/heading]
[/parallax]
[/parallax_image]
[/code]
[line_break/]
[heading size="h2" style="uk-module-title"]Icons[/heading]
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"/]
[badge style="note uk-margin-top"]markup[/badge]
[list style="list-icons"]
[li icon="asterisk"]List Item 1[/li]
[li icon="asterisk"]List Item 2[/li]
[li icon="asterisk"]List Item 3[/li]
[/list]
[line_break/]
[line_break/]
[heading size="h3" style="uk-module-title uk-margin-large-top"]Adding icons to Menu items[/heading]
To add an icon to a menu item, go to Extensions > Template Manager > click on the template to edit > on the second tab "Options", select 'Menus' > choose a menu from the dropdown > in the icon column, select the icon you'd want to add for the respective menu item
[heading size="h3" style="uk-module-title uk-margin-large-top"]Adding icons to Modules[/heading]
To add an icon to a menu item, go to Extensions > Template Manager > click on the template to edit > on the second tab "Options", select 'Modules' > search or filter for the modules on the top fields > in the icon column, select the icon you'd want to add for the respective module
[heading size="h3" style="uk-module-title uk-margin-large-top"]Adding icons to lists[/heading]
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
[heading size="h2" style="uk-module-title"]Cards[/heading]
Use the [card] shortcode to create staff profiles e.g for company staff. The [card] shortcode gives you the option to add the person's name, the title and the person's avatar.
[line_break/]
[grid]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-1.jpg"]
[card_social_icons style=""]
[icon_button icon="facebook" url="#" target="_self"][/icon_button]
[icon_button icon="linkedin" url="#" target="_self"][/icon_button]
[icon_button icon="twitter" url="#" target="_self"][/icon_button]
[icon_button icon="instagram" url="#" target="_self"][/icon_button]
[/card_social_icons]
[/card]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card title="Israel Carter" subtitle="CTO" image="images/demo/avatar/team-2.jpg"]
[card_social_icons style=""]
[icon_button icon="facebook" url="#" target="_self"][/icon_button]
[icon_button icon="linkedin" url="#" target="_self"][/icon_button]
[icon_button icon="twitter" url="#" target="_self"][/icon_button]
[icon_button icon="instagram" url="#" target="_self"][/icon_button]
[/card_social_icons]
[/card]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card title="Sharon Berry" subtitle="CFO" image="images/demo/avatar/team-3.jpg"]
[card_social_icons style=""]
[icon_button icon="facebook" url="#" target="_self"][/icon_button]
[icon_button icon="linkedin" url="#" target="_self"][/icon_button]
[icon_button icon="twitter" url="#" target="_self"][/icon_button]
[icon_button icon="instagram" url="#" target="_self"][/icon_button]
[/card_social_icons]
[/card]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card title="Kerry Clayton" subtitle="Head Finance" image="images/demo/avatar/team-4.jpg"]
[card_social_icons style=""]
[icon_button icon="facebook" url="#" target="_self"][/icon_button]
[icon_button icon="linkedin" url="#" target="_self"][/icon_button]
[icon_button icon="twitter" url="#" target="_self"][/icon_button]
[icon_button icon="instagram" url="#" target="_self"][/icon_button]
[/card_social_icons]
[/card]
[/column]
[/grid]
[line_break/]
[badge style="note"]markup[/badge]
[code]
[card title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-4.jpg" link=""]
[card_social_icons style=""]
[icon_button icon="facebook" url="#" target="_self"]
[/icon_button]
[icon_button icon="linkedin" url="#" target="_self"]
[/icon_button]
[/card_social_icons]
[/card][/code][line_break/]
You can set the tm-icons-visible class to the [person_social_icons] style attribute to have the social icons always visible.
[line_break/]
[badge style="note"]markup[/badge]
[code]
[card title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-4.jpg"]
[card_social_icons style="tm-icons-visible"]
...
[/card_social_icons]
[/card][/code][line_break/]
[heading size="h2" style="uk-module-title uk-margin-large-top"]Cards with links[/heading]
Use the [card_link] shortcode to create a card with a link. The link can be an internal/external page or a modal box.
[line_break/]
[badge style="note"]markup[/badge]
[code]
[card_link title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-4.jpg" link=""]
...
[/card_link][/code]
The following examples uses a modal box to show more information of the person. To use a modal box, link link parameter to the unique id of the [card_link_modal] shortcode.
[line_break/]
[grid]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-1.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Israel Carter" subtitle="CTO" image="images/demo/avatar/team-2.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Sharon Berry" subtitle="CFO" image="images/demo/avatar/team-3.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Kerry Clayton" subtitle="Head Finance" image="images/demo/avatar/team-4.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"][/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"][/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[/grid]
[card_link_modal id="tm1" img="images/demo/avatar/team-1-big.jpg" title="Diane Moreno" subtitle="Chief Executive Officer"]
Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Recover from The Endomics Dental Team.
She received her Doctorate in Medical Dentistry from the Boston University School of Dental. She later completed an extensive training in Conscious Sedation from Cambridge.
[button style="primary" href="#" target="_self"]Read More[/button]
[/card_link_modal]
[line_break/]
[toggle_code open="false" title="Show code"]
[grid]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Diane Moreno" subtitle="CEO" image="images/demo/avatar/team-1.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"]
[/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Israel Carter" subtitle="CTO" image="images/demo/avatar/team-2.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"]
[/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Sharon Berry" subtitle="CFO" image="images/demo/avatar/team-3.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"]
[/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[column responsive small="1-1" medium="1-2" large="1-4"]
[card_link title="Kerry Clayton" subtitle="Head Finance" image="images/demo/avatar/team-4.jpg" link="#tm1"]
[card_social_icons style=""]
[icon_button icon="facebook" url="https://web.facebook.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="twitter" url="https://twitter.com/arrowthemes" target="_blank"]
[/icon_button]
[icon_button icon="behance" url="https://www.behance.net/joelmb" target="_blank"]
[/icon_button]
[/card_social_icons]
[/card_link]
[/column]
[/grid]
[card_link_modal id="tm1" img="images/demo/avatar/team-1-big.jpg" title="Diane Moreno" subtitle="Chief Executive Officer"]
Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Recover from The Endomics Dental Team.
She received her Doctorate in Medical Dentistry from the Boston University School of Dental. She later completed an extensive training in Conscious Sedation from Cambridge.
[button style="primary" href="#" target="_self"]Read More
[/button]
[/card_link_modal][/toggle_code]
[heading size="h2" style="uk-module-title"]Audio[/heading]
To create an audio player, use the [audio] shortcode
[audio]
[source src="/images/demo/audio/sample.mp3" type="audio/mp3"][/source]
[source src="/images/demo/audio/sample.ogg" type="audio/ogg"][/source]
[/audio]
[line_break/]
[badge style="note"]markup[/badge]
[code]
[audio]
[source src="/images/demo/audio/sample.mp3" type="audio/mp3"]
[/source]
[source src="/images/demo/audio/sample.ogg" type="audio/ogg"]
[/source]
[/audio][/code]
[line_break/]
[heading size="h2" style="uk-module-title"]Video[/heading]
To create an video player, use the [video] shortcode
[video poster="/images/demo/video/poster.jpg"]
[source src="/images/demo/video/big_buck_bunny.mp4" type="video/mp4"][/source]
[source src="/images/demo/video/big_buck_bunny.webm" type="video/webm"][/source]
[/video]
[line_break/]
[badge style="note"]markup[/badge]
[code]
[video poster="/images/demo/video/poster.jpg"]
[source src="/images/demo/video/big_buck_bunny.mp4" type="video/mp4"]
[/source]
[source src="/images/demo/video/big_buck_bunny.webm" type="video/webm"]
[/source]
[/video][/code]
[line_break/]
You can also stream youtube or vimeo videos using the player, by using the following shortcodes, where the id is the video id on the respective channel
[line_break/]
[badge style="note"]markup[/badge]
[code]
[youtube id="SkVqJ1SGeL0"]
[/youtube]
[vimeo id="149148896"]
[/vimeo][/code]
Author
May 2, 2030 at 1:55 pm
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.