Features

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

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

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *