[sectionheading]Typography[/sectionheading]

[one_half]

This is a H1 heading.

This is a H2 heading.

This is a H3 heading.

This is a H4 heading.

This is a H5 heading.

This is a H6 heading.

[/one_half]

[one_half_last]

Paragraphs

These are some sample paragraphs. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

[/one_half_last]

Blockquotes

[one_half]

[blockquote cite=’Fight Club’]This is your life and it’s ending one minute at a time.[/blockquote]

[code class=’example’][[blockquote cite=’Fight Club’]This is your life and it’s ending one minute at a time.[/blockquote]][/code]

[/one_half]

[one_half_last]

[blockquote cite=’Fight Club’ align=’right’ size=’small’]This is your life and it’s ending one minute at a time.[/blockquote]

[code class=’example’][[blockquote cite=’Fight Club’ align=’right’ size=’small’]This is your life and it’s ending one minute at a time.[/blockquote]][/code]

[/one_half_last]

[sectionheading]
Columns[/sectionheading]

[one_third]

One Third

Shortcode: ONE_THIRD

Lorem ipsum dolor sit amit, consectetur adipiscing elit etiam feugiat nunc ut.

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
[/one_third][one_third]

One Third

Shortcode: ONE_THIRD

Lorem ipsum dolor sit amit, consectetur adipiscing elit etiam feugiat nunc ut.

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
[/one_third][one_third_last]

One Third

Shortcode: ONE_THIRD_LAST

Lorem ipsum dolor sit amit, consectetur adipiscing elit etiam feugiat nunc ut.

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
[/one_third_last]

You can use several fractional combinations to suit your needs, so long as the last column has a suffix of “_last”, as shown above.

Available Column Shortcodes – Up to 6 columns

• one_third
• two_thirds
• one_half
• one_fourth
• three_fourths
• one_fifth
• two_fifth
• three_fifth
• four_fifth
• one_sixth
• five_sixth

[sectionheading]Buttons & Controls[/sectionheading]
To create metro styled button, use the button shortcode with size, color options as shown in below examples.

[button]Default[/button]

[code class=’example’][[button]Default[/button]][/code]

Colored buttons

[button color=’blue’]Color Blue[/button]

[button color=’red’]Color Red[/button]

[button color=’orange’]Color Orange[/button]

[button color=’lime’]Color Lime[/button]

[button color=’grey’]Color Grey[/button]

[code class=’example’]

[[button color=’blue’]Color Blue[/button]]

[[button color=’red’]Color Red[/button]]

[[button color=’orange’]Color Orange[/button]]

[[button color=’lime’]Color Lime[/button]]

[[button color=’grey’]Color Grey[/button]]

[/code]

Button Sizes

[button size=’thin’]Thin Size[/button]

[button]Normal Size[/button]

[button size=’medium’]Medium Size[/button]

[button size=’large’]Large Size[/button]

[code class=’example’]

[[button size=’thin’]Thin Size[/button]]

[[button]Normal Size[/button]]

[[button size=’medium’]Medium Size[/button]]

[[button size=’large’]Large Size Button[/button]]

[/code]

Striped Buttons

[button color=’red-striped’]Red Stripe[/button]

[button color=’lime-striped’]Green Stripe[/button]

[button color=’blue-striped’]Blue Stripe[/button]

[button color=’grey-striped’]Grey Stripe[/button]

[code class=’example’]

[[button color=’red-striped’]Red Stripe[/button]]

[[button color=’lime-striped’]Green Stripe[/button]]

[[button color=’blue-striped’]Blue Stripe[/button]]

[[button color=’grey-striped’]Grey Stripe[/button]]

[/code]

Icon Buttons

To create a button using an icon, use the icon shortcode inside the button, just as shown below.

[button color=’red’][icon class=’icon-home icon-white’][/icon][/button]

[button color=’lime’][icon class=’icon-plus icon-white’][/icon][/button]

[button color=’blue’][icon class=’icon-retweet icon-white’][/icon][/button]

[code class=’example’]

[[button color=’red’][icon class=’icon-home icon-white’][/icon][/button]]

[[button color=’lime’][icon class=’icon-plus icon-white’][/icon][/button]]

[[button color=’blue’][icon class=’icon-retweet icon-white’][/icon][/button]]

[/code]

Buttons with both text and icon

So far we know how to create a button with text in it. We also have tackled how to create a button with only an icon in it. This time let’s get a bunch of buttons with both text and icon in it.

[button color=’red’ size=’thin’]Delete [icon class=’icon-trash icon-white’][/icon][/button]

[button color=’lime’][icon class=’icon-plus icon-white’][/icon] Add Item[/button]

[button color=’blue-striped’]Listen to podcast [icon class=’icon-headphones’][/icon][/button]

[button color=’blue’ size=’medium’]Submit Entry [icon class=’icon-share-alt icon-white’][/icon][/button]

[code class=’example’]

[[button color=’red’ size=’thin’]Delete [icon class=’icon-trash icon-white’][/icon][/button]]

[[button color=’lime’][icon class=’icon-plus icon-white’][/icon] Add Item[/button]]

[[button color=’blue-striped’]Listen to podcast [icon class=’icon-headphones’][/icon][/button]]

[[button color=’blue’ size=’medium’]Submit Entry [icon class=’icon-share-alt icon-white’][/icon][/button]]

[/code]

Tab Control

[tabgroup]
[tab title=”Tab 1″ id=”t1″]Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed erat urna, non pulvinar nisi. Aenean quis tellus non magna pharetra fringilla non id ipsum. Aliquam quis nisl et mi vulputate consequat vel id lectus. Phasellus a porttitor turpis.  [/tab]
[tab title=”Tab 2″ id=”t2″]Tab 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed erat urna, non pulvinar nisi. Aenean quis tellus** non magna pharetra fringilla non id ipsum. Aliquam quis nisl et mi vulputate consequat vel id lectus. Phasellus a porttitor turpis**. Vivamus sit amet accumsan ligula.[/tab]
[tab title=”Tab 3″ id=”t3″]Tab 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed erat urna, non pulvinar nisi. Aenean quis tellus non magna pharetra fringilla non id ipsum. Aliquam quis nisl et mi vulputate consequat vel id lectus. Phasellus a porttitor turpis. Vivamus sit amet accumsan ligula.[/tab]
[/tabgroup]

[code class=’example’]

[[tabgroup]
[tab title=”Tab 1″ id=”t1″]Tab 1 content[/tab]
[tab title=”Tab 2″ id=”t2″]Tab 2 content[/tab]
[tab title=”Tab 3″ id=”t3″]Tab 3 content[/tab]
[/tabgroup]]

[/code]

Sample Shortcodes

Slider shortcode example

The height property of slider shortcode should be set to either ‘m‘ or ‘l‘ or ‘xl‘ for heights medium, large and very large respectively.

[code class=’example’]

[[slider height=”” show_navigation=”yes/no”]
[slide title=”” desc=””][/slide]
[slide title=”” desc=””][/slide]
[slide title=”” desc=””][/slide]
[/slider]]

[/code]

Pager shortcode example

[code class=”example”]

[[pagegroup]
[page title=”News” id=”p1″][/page]
[page title=”Services” id=”p2″][/page]
[page title=”People” id=”p3″][/page]
[/pagegroup]]

[/code]

Tile shortcode example

The height property of slider shortcode should be set to either ‘m‘ or ‘l‘ or ‘xl‘ for heights medium, large and very large respectively.

*Is_Internal * Set to ‘Yes’ if the tile links to something with in the same page.

Is_static – ‘Yes‘ will always show the title, ‘No‘ will show the title only on hover.

[code class=”example”]

[[tile title=”Tile Title” link=”#” height=”m/l/xl” is_internal=”yes/no” is_static=”yes/no“][/tile]]

[/code]

Section Heading shortcode example

For section headings, like the headings on this page with icons, use an image with dimensions 24 x 24.

[code class=”example”]

[[sectionheading]******Section Heading Text[/sectionheading]]

[/code]