Shortcodes

[heading size=”h2″ style=”uk-module-title”]Headings[/heading]

Here are some examples of headings

[heading size=”h1″]H1 Heading[/heading] [heading size=”h2″]H2 Heading[/heading] [heading size=”h3″]H3 Heading[/heading] [heading size=”h4″]H4 Heading[/heading] [heading size=”h5″]H5 Heading[/heading] [heading size=”h6″]H6 Heading[/heading] [badge style=”note uk-margin-top”]markup[/badge] [code][heading size=”h1″]H1 Heading[/heading][/code][line_break/] [heading size=”h3″ style=”uk-module-title”]Heading with underline[/heading]

To use the conventional module title underline, use the uk-module-title style. To have a fancy module title, use the uk-module-title-alt style. You can also highlight the first word of a title using the [highlight] shortcode. Example:

[line_break/] [heading size=”h3″ style=”uk-module-title”]Module title[/heading] [heading size=”h3″ style=”uk-module-title”][highlight]Module [/highlight] title[/heading] [heading size=”h3″ style=”uk-module-title-alt”]Alternative module title[/heading] [text align=”center”] [heading size=”h3″ style=”uk-module-title-alt”]Centered alternative module title[/heading] [/text] [badge style=”note uk-margin-top”]markup[/badge] [code] [heading size=”h3″ style=”uk-module-title”]Module title[/heading] [heading size=”h3″ style=”uk-module-title”][highlight]Module [/highlight] title[/heading] [heading size=”h3″ style=”uk-module-title-alt”]Alternative module title[/heading] [text align=”center”] [heading size=”h3″ style=”uk-module-title-alt”]Centered alternative module title[/heading] [/text] [/code] [line_break/]

To add a line break use the [line_break/] shortcode. To create a divider use the [divider/] shortcode.

[divider/] [line_break/] [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=”icon-grav-alarm”] 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=”icon-grav-config”]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=”icon-grav-graph2″]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=”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”]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=”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=”icon-asterisk”]Lorem ipsum dolor[/li] [li icon=”icon-asterisk”]consectetur adipisicing elit[/li] [li icon=”icon-asterisk”]sed do eiusmod tempor[/li] [/list] [/column] [column size=”1-3″] [list style=”list-icons”] [li icon=”icon-circle-o”]Lorem ipsum dolor[/li] [li icon=”icon-circle-o”]consectetur adipisicing elit[/li] [li icon=”icon-circle-o”]sed do eiusmod tempor[/li] [/list] [/column] [column size=”1-3″] [list style=”list-icons”] [li icon=”icon-check-square-o”]Lorem ipsum dolor[/li] [li icon=”icon-check-square-o”]consectetur adipisicing elit[/li] [li icon=”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=”icon-folder-o”]Lorem ipsum dolor[/li] [li icon=”icon-folder-o”]consectetur adipisicing elit[/li] [li icon=”icon-folder-o”]sed do eiusmod tempor[/li] [/list] [/column] [column size=”1-3″] [list style=”list-icons”] [li icon=”icon-info-circle”]Lorem ipsum dolor[/li] [li icon=”icon-info-circle”]consectetur adipisicing elit[/li] [li icon=”icon-info-circle”]sed do eiusmod tempor[/li] [/list] [/column] [column size=”1-3″] [list style=”list-icons”] [li icon=”icon-check”]Lorem ipsum dolor[/li] [li icon=”icon-check”]consectetur adipisicing elit[/li] [li icon=”icon-check”]sed do eiusmod tempor[/li] [/list] [/column] [/child_grid] [child_grid][column size=”1-3″] [list style=”list-icons”] [li icon=”icon-chevron-right”]Lorem ipsum dolor[/li] [li icon=”icon-chevron-right”]consectetur adipisicing elit[/li] [li icon=”icon-chevron-right”]sed do eiusmod tempor[/li] [/list] [/column] [column size=”1-3″] [list style=”list-icons”] [li icon=”icon-arrow-circle-right”]Lorem ipsum dolor[/li] [li icon=”icon-arrow-circle-right”]consectetur adipisicing elit[/li] [li icon=”icon-arrow-circle-right”]sed do eiusmod tempor[/li] [/list] [/column] [column size=”1-3″] [list style=”list-icons”] [li icon=”icon-caret-right”]Lorem ipsum dolor[/li] [li icon=”icon-caret-right”]consectetur adipisicing elit[/li] [li icon=”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=”icon-asterisk”]List Item 1[/li] [li icon=”icon-asterisk”]List Item 2[/li] [li icon=”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=”icon-caret-right”]Lorem ipsum dolor[/li] [li icon=”icon-caret-right”]consectetur adipisicing elit[/li] [li icon=”icon-caret-right”]sed do eiusmod tempor[/li] [nested_list] [li icon=”icon-caret-right”]Lorem ipsum dolor[/li] [li icon=”icon-caret-right”]consectetur adipisicing elit[/li] [li icon=”icon-caret-right”]sed do eiusmod tempor[/li] [/nested_list] [li icon=”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=”icon-asterisk”]List Item 1[/li] [li icon=”icon-asterisk”]List Item 2[/li] [nested_list] [li icon=”icon-asterisk”]Child Item 1[/li] [li icon=”icon-asterisk”]Child Item 2[/li] [/nested_list] [li icon=”icon-asterisk”]List Item 3[/li] [/list][/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-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
ttm-padding-sides	Add padding on the side of an element
tm-padding-small-sides	Add small padding on the side of an elemeny
tm-padding-small-left	Add small left padding on an elemeny
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