Members Area

[sectionheading]typo_icon_redTypography[/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]
table_icon_redColumns[/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]controls_icon_redButtons & Controls[/sectionheading]
To create metro styled button, use the button shortcode with size, color options as shown in below examples.

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

Colored buttons

[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

[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

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

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

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

Pager Control

[pagegroup]

[page title="News" id="t1"][one_half]

At times when know-how and people are the main factors that determine the company’s competitive advantage, organisations must learn how to use new technologies to support knowledge and innovation management.

[/one_half]

[one_half_last]

How can we help you?

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.
[/one_half_last] [/page]

[page title="Services" id="t2"][one_half]Page 2 content.

You can have anything as page content like buttons, columns and other elements. It also supports shortcodes, like this button for example,

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.[/one_half]

[one_half_last]

Some great list items:

  • Great item one
  • Another one goes here
  • Consectecur adipiscing
    • I’m a sub item
  • The above is from dummy text

[/one_half_last][/page]

[page title="People" id="t3"]Page 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.[/page]

[/pagegroup]