logo

typo_icon_redTypography

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.

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.

Blockquotes

This is your life and it’s ending one minute at a time.

Fight Club

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

This is your life and it’s ending one minute at a time.

Fight Club

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


table_icon_redColumns

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

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

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.

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

controls_icon_redButtons & Controls


To create metro styled button, use the button shortcode with size, color options as shown in below examples.

Default [button]Default[/button]

Colored buttons

Color Blue Color Red Color Orange Color Lime Color Grey

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

Button Sizes

Thin Size Normal Size Medium Size Large Size

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

[button]Normal Size[/button]

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

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

Striped Buttons

Red Stripe Green Stripe Blue Stripe Grey Stripe

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

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]

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.

Delete Add Item Listen to podcast Submit Entry

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

Tab Control

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

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

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.

[slider height="" show_navigation="yes/no"]
[slide title="" desc=""]<Insert Image Here>[/slide]
[slide title="" desc=""]<Insert Image Here>[/slide]
[slide title="" desc=""]<Insert Image Here>[/slide]
[/slider]

Pager shortcode example

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

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.

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

Section Heading shortcode example

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

[sectionheading]<insert icon image here>Section Heading Text[/sectionheading]