Elements

Seperators & Dividers

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Circle Dividers Full”}

Here are some examples of the circle Dividers.

{spacer height=”40px”}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-big-left}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-circle-big-center}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-big-right}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{spacer height=”40px”} {toggle1 title=”Shortcode”}

{divider-circle-big-left} {divider-circle-big-center} {divider-circle-big-right}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Circle Dividers Half”}

Here are some examples of the circle Dividers with half of the width.

{spacer height=”40px”}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-small-left}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-circle-small-center}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-small-right}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{spacer height=”40px”} {toggle1 title=”Shortcode”}

{divider-circle-small-left} {divider-circle-small-center} {divider-circle-small-right}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Special Dividers”}

Here are some examples of the special Dividers.

{spacer height=”40px”}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-default}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-fade}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-border}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-icon icon=”fa-heart”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-icon icon=”fa-rocket”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-icon icon=”fa-book”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-icon icon=”fa-cogs”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{spacer height=”40px”} {toggle1 title=”Shortcode”}

{divider-default} {divider-fade} {divider-border} {divider-icon icon="fa-heart"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Spacer”}

This is a Element which can be very useful, it creates a transparent spacer area, for this Demo we have give them a Background Color so that you can see it.

{spacer height=”40px”}
{spacer height=”80px”}
{spacer height=”120px”}

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{spacer height="40px"}

{/toggle}

Posted on by GM in Elements Leave a comment

Tooltips & Popovers

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Tooltips”}

This is a basic example of the Tooltips, they are working with Shortcodes.

{spacer height=”40px”}

Vivamus {tooltip link=”#” text=”default Tooltip” title=”Hello I am a Tooltip”} lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis {tooltip link=”#” text=”Tooltip” title=”Hello I am a Tooltip on the top side, awesome, right!”} euismod semper.

Integer posuere erat a ante {tooltip link=”#” text=”Tooltip” title=”I am a Tooltip on the top”} venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis {tooltip link=”#” text=”Tooltip” title=”Hello I am a Tooltip on the top”} natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Vestibulum id ligula porta felis euismod semper. Donec {tooltip link=”#” text=”Tooltip with much Text” title=”Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.”} ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta  {tooltip link=”#” text=” Tooltip with much more Text” title=”Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. “} ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{tooltip text="Text here" title="Content here"} {tooltip text="Text here" title="Content here" link="http://www.google.de"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Popovers”}

This is a basic example of the Popover Shortcode.

{spacer height=”40px”}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”left” text=”Popover Left”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”Popover Top”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Bottom” position=”bottom” text=”Popover Bottom”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”right” text=”Popover Right”}

{divider-circle-big-left class=”mt30 mb40″}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”left” text=”Popover Left” class=”btn btn-default”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”Popover Top” class=”btn btn-primary”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Bottom” position=”bottom” text=”Popover Bottom” class=”btn btn-danger”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”right” text=”Popover Right” class=”btn btn-success”}

{divider-circle-big-left class=”mt30 mb40″}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”“}

{spacer height=”30px”} {toggle1 title=”Shortcode”}

Default Example {popover content="Content" title="Title" position="top" text="Click me"}  Button Example {popover content="Content" title="Title" position="top" text="Click me" class="btn btn-default"} 

{/toggle}

Posted on by GM in Elements Leave a comment

Labels

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Labels”}

This is a basic example of the Labels, they are working with Shortcodes.

{spacer height=”40px”}

Vivamus {label text=”default”} lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis {label text=”label-primary” color=”label-primary”} euismod semper.

Integer posuere erat a ante {label text=”label-success” color=”label-success”} venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis {label text=”label-info” color=”label-info”} natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Vestibulum id ligula porta felis euismod semper. Donec {label text=”label-warning” color=”label-warning”} ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta {label text=”label-danger” color=”label-danger”} ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{label text="Text here"} {label text="Text here" color="label-primary"} {label text="Text here" color="label-success"} {label text="Text here" color="label-info"} {label text="Text here" color="label-warning"} {label text="Text here" color="label-danger"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Labels in Headlines”}

This is a basic example of the Labels, they are also working in Headlines.

{spacer height=”40px”}

Headline H1 {label text=”new”}

{spacer height=”30px”}

Headline H2 {label text=”new” color=”label-primary”}

{spacer height=”30px”}

Headline H3 {label text=”new” color=”label-success”}

{spacer height=”20px”}

Headline H4 {label text=”new” color=”label-info”}

{spacer height=”20px”}

Headline H5 {label text=”new” color=”label-warning”}

{spacer height=”20px”}

Headline H6 {label text=”new” color=”label-danger”}
Posted on by GM in Elements Leave a comment

Testimonials

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Testimonial Style 1″}

This is a default Testimonial Module, Style1, with Pagination, default Color, different Content Variations and with deactivated Autoplay.

{spacer height=”20px”} {loadposition testimonials1} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Testimonial Style 2″}

This is a default Testimonial Module, Style2, without Pagination, default Color, different Content Variations and with deactivated Autoplay.

{spacer height=”20px”} {loadposition testimonials2} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Testimonial Style 3″}

This is a default Testimonial Module, Style1, with Pagination, default Color, different Content Variations and with Autoplay.

{spacer height=”20px”} {loadposition testimonials3} {spacer height=”40px”}

Posted on by GM in Elements Leave a comment

Lists

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Default Lists”}

Here are some examples of the default List Styles.

{spacer height=”20px”} {row} {col4} {list} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {ol-list} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/ol-list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-check-square fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-square fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-check-square fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-check-square fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-square fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {toggle1 title=”Shortcode”}

{list}   {listing}List Item{/listing}   {listing}List Item{/listing}   {listing}List Item{/listing} {/list} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Using Icons from Font Awesome”}

Here are some examples of the default List Styles with Icons from Font Awesome, more then 360 are available.

{spacer height=”20px”} {row} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-check-circle color-theme fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-check-circle color-theme fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-star color-orange fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-star color-orange fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-arrow-right color-danger fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {spacer height=”40px”} {row} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-caret-square-o-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-square-o-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-file-text-o fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-file-text-o fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-rocket fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-rocket fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-rocket fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-rocket fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-rocket fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {spacer height=”40px”} {row} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-long-arrow-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-long-arrow-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-caret-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-caret-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-caret-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-caret-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {col4} {list type=”fa-ul”} {listing}{icon name=”fa-angle-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-angle-right fa-li”}Consectetur adipiscing elit{/listing} {listing}{icon name=”fa-angle-right fa-li”}Integer molestie lorem at massa{/listing} {listing}{icon name=”fa-angle-right fa-li”}Facilisis in pretium nisl aliquet{/listing} {listing}{icon name=”fa-angle-right fa-li”}Nulla volutpat aliquam velit{/listing} {/list} {/col} {/row} {toggle1 title=”Shortcode”}

{list type="fa-ul"}   {listing}{icon name="fa-rocket fa-li"}List Item{/listing}   {listing}{icon name="fa-rocket fa-li"}List Item{/listing}   {listing}{icon name="fa-rocket fa-li"}List Item{/listing} {/list} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Ordered Lists”}

Here are some examples of the ordered List Styles.

{spacer height=”20px”} {row} {col6} {ol-list type=”rounded-list”} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/ol-list} {/col} {col6} {ol-list type=”rectangle-list”} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Consectetur adipiscing elit{/listing} {listing}Integer molestie lorem at massa{/listing} {listing}Facilisis in pretium nisl aliquet{/listing} {listing}Nulla volutpat aliquam velit{/listing} {/ol-list} {/col} {/row} {toggle1 title=”Shortcode”}

{ol-list type="rounded-list"}   {listing}<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing} {/ol-list} 

{/toggle} {toggle1 title=”Shortcode”}

{ol-list type="rectangle-list"}   {listing}<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing}   {listing};<a href="#">List Item</a>{/listing} {/ol-list} 

{/toggle}

Posted on by GM in Elements Leave a comment

Info Boxes

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Alerts”}

Here are some examples of the default Alerts.

{spacer height=”20px”} {alert style=”danger”}Danger Style! Link here… Lorem ipsum dolor sit amet.{/alert} {alert style=”info”}Info Style! Link here… Lorem ipsum dolor sit amet.{/alert} {alert style=”warning”}Warning Style! Link here… Lorem ipsum dolor sit amet.{/alert} {alert style=”success”}Success Style! Link here… Lorem ipsum dolor sit amet.{/alert} {toggle1 title=”Shortcode”}

{alert style="danger"}Your Content here{/alert} {alert style="info"}Your Content here{/alert} {alert style="warning"}Your Content here{/alert} {alert style="success"}Your Content here{/alert}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Highlight”}

Here is a example of the Highlight Area.

{spacer height=”20px”} {highlight}

Lorem ipsum dolor

Quisque vitae mauris fringilla, auctor nulla sodales, semper neque. Praesent adipiscing, ligula nec faucibus condimentum, metus ligula auctor dui, ac aliquet sem elit non arcu.

{/highlight} {toggle1 title=”Shortcode”}

{highlight}Your Content here{/highlight}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Wells”}

Here are some examples of the Well Areas.

{spacer height=”20px”} {well}

Quisque vitae mauris fringilla, auctor nulla sodales, semper neque. Praesent adipiscing, ligula nec faucibus condimentum, metus ligula auctor dui, ac aliquet sem elit non arcu.

{/well} {well style=”well-border”}

Quisque vitae mauris fringilla, auctor nulla sodales, semper neque. Praesent adipiscing, ligula nec faucibus condimentum, metus ligula auctor dui, ac aliquet sem elit non arcu.

{/well} {toggle1 title=”Shortcode”}

{well}Your Content here{/well} {well style="well-border"}Your Content here{/well}

{/toggle}

Posted on by GM in Elements Leave a comment

Accordions & Toggles

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Accordion Style 1″}

This is a default Accordion (in this example as a Joomla Module), the first Tab is open for default.

{spacer height=”10px”} {loadposition accordion1} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Accordion Style 2″}

This is a default Accordion with Style 2 (in this example as a Joomla Module), no Tab is open for default.

{spacer height=”10px”} {loadposition accordion2} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Accordion Style 3″}

This is a default Accordion (in this example as a Joomla Module), the second Tab is open for default and in the tile are Icons.

{spacer height=”10px”} {loadposition accordion3} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 1 – closed”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle1 title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1 title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1 title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 1 – open”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle1-open title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1-open title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1-open title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 2 – closed”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle2 title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2 title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2 title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 2 – open”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle2-open title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2-open title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2-open title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {toggle1 title=”Shortcode”}

{toggle1 title="title"}Your Content here{/toggle} {toggle1-open title="title"}Your Content here{/toggle}  {toggle2 title="title"}Your Content here{/toggle} {toggle2-open title="title"}Your Content here{/toggle}

{/toggle}

Posted on by GM in Elements Leave a comment

Buttons

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Default Buttons”}

Here are some examples of the default Button Colors.

{spacer height=”40px”} {button title=”” link=”#”}Default{/button} {button title=”” link=”#” color=”btn-primary”}Primary{/button} {button title=”” link=”#” color=”btn-success”}Success{/button} {button title=”” link=”#” color=”btn-info”}Info{/button} {button title=”” link=”#” color=”btn-warning”}Warning{/button} {button title=”” link=”#” color=”btn-danger”}Danger{/button} {toggle1 title=”Shortcode”}

{button title="" link="#"}Default{/button} {button title="" link="#" color="btn-primary"}Primary{/button} {button title="" link="#" color="btn-success"}Success{/button} {button title="" link="#" color="btn-info"}Info{/button} {button title="" link="#" color="btn-warning"}Warning{/button} {button title="" link="#" color="btn-danger"}Danger{/button} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Bordered Buttons”}

Here are some examples of the default Button Colors.

{spacer height=”40px”} {button title=”” link=”#” style=”btn-border”}Default{/button} {button title=”” link=”#” style=”btn-border” color=”btn-primary”}Primary{/button} {button title=”” link=”#” style=”btn-border” color=”btn-success”}Success{/button} {button title=”” link=”#” style=”btn-border” color=”btn-info”}Info{/button} {button title=”” link=”#” style=”btn-border” color=”btn-warning”}Warning{/button} {button title=”” link=”#” style=”btn-border” color=”btn-danger”}{icon name=”fa-exclamation-triangle fa-margin-right”}Danger{/button} {toggle1 title=”Shortcode”}

{button title="" style="btn-border" link="#"}Default{/button} {button title="" style="btn-border" link="#" color="btn-primary"}Primary{/button} {button title="" style="btn-border" link="#" color="btn-success"}Success{/button} {button title="" style="btn-border" link="#" color="btn-info"}Info{/button} {button title="" style="btn-border" link="#" color="btn-warning"}Warning{/button} {button title="" style="btn-border" link="#" color="btn-danger"}Danger{/button} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Buttons with Icons”}

Here are some examples of the default Buttons in combination with Icons.

{spacer height=”40px”} {button title=”” link=”#”}Default{icon name=”fa-heart fa-margin-left”}{/button} {button title=”” link=”#” color=”btn-primary”}{icon name=”fa-archive fa-margin-right”}Primary{/button} {button title=”” link=”#” color=”btn-success”}{icon name=”fa-cloud-download fa-margin-right”}Success{/button} {button title=”” link=”#” color=”btn-info”}Info{icon name=”fa-gift fa-margin-left”}{/button} {button title=”” link=”#” color=”btn-warning”}{icon name=”fa-leaf fa-margin-right”}Warning{/button} {button title=”” link=”#” color=”btn-danger”}{icon name=”fa-quote-left fa-margin-right”}Danger{/button} {toggle1 title=”Shortcode”}

{button title="" link="#"}Default {icon name="fa-heart"}{/button} {button title="" link="#" color="btn-primary"}{icon name="fa-archive"} Primary{/button} {button title="" link="#" color="btn-success"}{icon name="fa-cloud-download"} Success{/button} {button title="" link="#" color="btn-info"}Info {icon name="fa-gift"}{/button} {button title="" link="#" color="btn-warning"}{icon name="fa-leaf"} Warning{/button} {button title="" link="#" color="btn-danger"}{icon name="fa-quote-left"} Danger{/button} 

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Buttons with different Sizes”}

Here are some examples of the default Button sizes.

{spacer height=”40px”} {button title=”” link=”#” color=”btn-info” size=”btn-xs”}Very Small{/button} {button title=”” link=”#” color=”btn-danger” size=”btn-sm”}Small{/button} {button title=”” link=”#” color=”btn-warning” size=”btn-md”}Medium{/button} {button title=”” link=”#” color=”btn-default” size=”btn-lg”}Large{/button} {button title=”” link=”#” color=”btn-info” size=”btn-xs” style=”btn-border”}Very Small{/button} {button title=”” link=”#” color=”btn-danger” size=”btn-sm” style=”btn-border”}Small{/button} {button title=”” link=”#” color=”btn-warning” size=”btn-md” style=”btn-border”}Medium{/button} {button title=”” link=”#” color=”btn-default” size=”btn-lg” style=”btn-border”}Large{/button} {toggle1 title=”Shortcode”}

{button title="" link="#" color="btn-info" size="btn-xs"}Very Small{/button} {button title="" link="#" color="btn-danger" size="btn-sm"}Small{/button} {button title="" link="#" color="btn-warning" size="btn-md"}Medium{/button} {button title="" link="#" color="btn-default" size="btn-lg"}Large{/button}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Special Buttons”}

Here are some examples of the Buttons in combination with some special effects or other Shortcodes.

{spacer height=”40px”} {button link=”/images/sampledata/portfolio/13.jpg” color=”btn-primary” lightbox=”on”}Image{/button} {button link=”#” color=”btn-success” class=”tooltip-on” title=”I have a Tooltip here”}Tooltip{/button} {button link=”http://youtu.be/HjcPOZ_z3Ts” color=”btn-info” lightbox=”on”}YouTube{/button} {button link=”http://www.google.de” color=”btn-warning” target=”_blank”}Link in new Window{/button} {button link=”https://maps.google.com/maps?q=stuttgart&hl=de&ie=UTF8&sll=37.0625,-95.677068&sspn=83.206395,191.513672&hnear=Stuttgart,+Baden-W%C3%BCrttemberg,+Deutschland&t=m&z=12″ color=”btn-danger” lightbox=”on”}Google Map{/button} {button link=”#” color=”btn-default”}{icon name=”fa-thumbs-up fa-margin-right color-theme”}More then {counter value=”13053″ color=”color-theme”} Fans{/button} {toggle1 title=”Shortcode”}

{button link="image.jpg" color="btn-primary" lightbox="on"}Image{/button} {button link="#" color="btn-success" title="I have a Tooltip" class="tooltip-on"}Tooltip{/button} {button link="youtube-url.com" color="btn-info" lightbox="on"}YouTube{/button} {button link="http://www.google.de" color="btn-warning" target="_blank"}Link in new Window{/button} {button link="googlemap-url.com" color="btn-danger" lightbox="on"}Google Map{/button}  {button link="#" color="btn-default"}{icon name="fa-thumbs-up fa-margin-right color-theme"}More then {counter value="13053" color="color-theme"} Fans{/button} 

{/toggle}

Posted on by GM in Elements Leave a comment

Progress Bars & Counters

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Basic Counter”}

This is a basic example of the Counter Shortcode. It can be used everywhere and it’s rendered as inline style so you can use it also in Headlines or similar.

{spacer height=”20px”}

This Template have {counter value=”13694″ color=”color-theme bold”} Lines of Code
Included are more then {counter value=”150″ color=”color-theme bold”} Shortcodes
Delievered with {counter value=”13″ color=”color-theme bold”} custom Joomla Extensions

{spacer height=”40px”}

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis {counter value=”145″ color=”color-purple bold”} vestibulum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis {counter value=”7″ color=”color-success bold”} mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante {counter value=”127″ color=”color-warning bold”} venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis {counter value=”12503″ color=”color-danger bold”} consectetur purus sit amet fermentum.

{toggle1 title=”Shortcode”}

{counter value="10"} {counter value="13486" color="color-success"} {counter value="12490" color="color-success bold"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Basic Progress Bars”}

This is a basic example of the default progress bars, you can use every value from 0 – 100.

{spacer height=”20px”} {progress width=”0″} {progress width=”5″} {progress width=”10″} {progress width=”15″} {progress width=”20″} {progress width=”25″} {progress width=”30″} {progress width=”35″} {progress width=”40″} {progress width=”45″} {progress width=”50″} {progress width=”55″} {progress width=”60″} {progress width=”65″} {progress width=”70″} {progress width=”75″} {progress width=”80″} {progress width=”85″} {progress width=”90″} {progress width=”95″} {progress width=”100″} {toggle1 title=”Shortcode”}

{progress width="10"} {progress width="23"} {progress width="39"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Progress Bars Color Variations”}

This is a basic example of the default progress bars with different colors.

{spacer height=”20px”} {progress width=”10″ } {progress width=”20″ color=”progress-bar-purple”} {progress width=”30″ color=”progress-bar-orange”} {progress width=”40″ color=”progress-bar-success”} {progress width=”50″ color=”progress-bar-info”} {progress width=”60″ color=”progress-bar-warning”} {progress width=”70″ color=”progress-bar-danger”} {toggle1 title=”Shortcode”}

{progress width="10"} {progress width="20" color="progress-bar-purple"} {progress width="30" color="progress-bar-orange"} {progress width="40" color="progress-bar-success"} {progress width="50" color="progress-bar-info"} {progress width="60" color="progress-bar-warning"} {progress width="70" color="progress-bar-danger"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Slim Progress Bars”}

This is a basic example of the slim progress bars.

{spacer height=”20px”} {progress-slim width=”0″} {progress-slim width=”5″} {progress-slim width=”10″} {progress-slim width=”15″} {progress-slim width=”20″} {progress-slim width=”25″} {progress-slim width=”30″} {progress-slim width=”35″} {progress-slim width=”40″} {progress-slim width=”45″} {progress-slim width=”50″} {progress-slim width=”55″} {progress-slim width=”60″} {progress-slim width=”65″} {progress-slim width=”70″} {progress-slim width=”75″} {progress-slim width=”80″} {progress-slim width=”85″} {progress-slim width=”90″} {progress-slim width=”95″} {progress-slim width=”100″} {toggle1 title=”Shortcode”}

{progress-slim width="10"} {progress-slim width="23"} {progress-slim width="39"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Slim Progress Bars Color Variations”}

This is a basic example of the slim progress bars in different colors.

{spacer height=”20px”} {progress-slim width=”10″ } {progress-slim width=”20″ color=”progress-bar-purple”} {progress-slim width=”30″ color=”progress-bar-orange”} {progress-slim width=”40″ color=”progress-bar-success”} {progress-slim width=”50″ color=”progress-bar-info”} {progress-slim width=”60″ color=”progress-bar-warning”} {progress-slim width=”70″ color=”progress-bar-danger”} {toggle1 title=”Shortcode”}

{progress-slim width="10"} {progress-slim width="20" color="progress-bar-purple"} {progress-slim width="30" color="progress-bar-orange"} {progress-slim width="40" color="progress-bar-success"} {progress-slim width="50" color="progress-bar-info"} {progress-slim width="60" color="progress-bar-warning"} {progress-slim width="70" color="progress-bar-danger"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Slim Progress Bars with Text”}

This is a basic example of the slim progress bars with optional text and percentage values.

{spacer height=”20px”} {progress-slim width=”95″ text=”Joomla” color=”color-theme”} {progress-slim width=”87″ text=”CSS3″ color=”color-theme”} {progress-slim width=”72″ text=”HTML5″ color=”color-theme”} {progress-slim width=”92″ text=”Project Management” color=”color-theme”} {toggle1 title=”Shortcode”}

{progress-slim width="95" text="Joomla" color="color-theme"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Progress Circles”}

This is a basic example of the circle progress bars.

{alert style=”danger”}Please note: these circles will NOT WORK WITH OUR THEMESWITCHER HERE IN THE DEMO cause the colors for it have to defined in the Shortcode.{/alert} {spacer height=”20px”} {row} {col6} {pie1 percent=”90″ color=”#20A5E8″ icon=”fa-heart”}

Style 1 Round

{/col} {col6} {pie2 percent=”70″ color=”#fff” icon=”fa-upload”}

Style 2 Round

{/col} {/row} {row} {col6} {pie3 percent=”50″ color=”#20A5E8″}

Style 3 Round

{/col} {col6} {pie4 percent=”40″ color=”#20A5E8″}

Style 4 Round

{/col} {/row} {toggle1 title=”Shortcode”}

{pie1 percent="90" color="#20A5E8" icon="fa-heart"} {pie2 percent="70" color="#ffffff" icon="fa-upload"} {pie3 percent="50" color="#20A5E8"} {pie4 percent="40" color="#20A5E8"}

{/toggle}

Posted on by GM in Elements Leave a comment

Typography

{headline type=”h2″ style=”heading-single” size=”18″ text=”Default Headings”} {spacer height=”40px”} {headline type=”h1″ text=”h1. Nullam sed massa quis elit sagittis”}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Cras aliquam accumsan lorem, ac cursus orci molestie eget.


{headline type=”h2″ text=”h2. Nullam sed massa quis elit sagittis”}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Cras aliquam accumsan lorem, ac cursus orci molestie eget.


{headline type=”h3″ text=”h3. Nullam sed massa quis elit sagittis”}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Cras aliquam accumsan lorem, ac cursus orci molestie eget.


{headline type=”h4″ text=”h4. Nullam sed massa quis elit sagittis”}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Cras aliquam accumsan lorem, ac cursus orci molestie eget.


{headline type=”h5″ text=”h5. Nullam sed massa quis elit sagittis”}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Cras aliquam accumsan lorem, ac cursus orci molestie eget.


{headline type=”h6″ text=”h6. Nullam sed massa quis elit sagittis”}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Cras aliquam accumsan lorem, ac cursus orci molestie eget.

{toggle1 title=”Shortcode”}

{headline type="h1" text="Headline here"} {headline type="h2" text="Headline here"} {headline type="h3" text="Headline here"} {headline type="h4" text="Headline here"} {headline type="h5" text="Headline here"} {headline type="h6" text="Headline here"}

{/toggle} {spacer height=”60px”} {headline type=”h2″ style=”heading-single” size=”18″ text=”Heading Styles”} {spacer height=”40px”} {row} {col4}{headline type=”h5″ style=”heading-single” text=”Special Heading 1″}{/col} {col4}{headline type=”h5″ style=”heading-single” text=”Special Heading 1″ align=”text-center”}{/col} {col4}{headline type=”h5″ style=”heading-single” text=”Special Heading 1″ align=”text-right”}{/col} {/row} {row} {col4}{headline type=”h5″ style=”heading-double” text=”Special Heading 2″}{/col} {col4}{headline type=”h5″ style=”heading-double” text=”Special Heading 2″ align=”text-center”}{/col} {col4}{headline type=”h5″ style=”heading-double” text=”Special Heading 2″ align=”text-right”}{/col} {/row} {row} {col4}{headline type=”h5″ style=”heading-diag” text=”Special Heading 3″}{/col} {col4}{headline type=”h5″ style=”heading-diag” text=”Special Heading 3″ align=”text-center”}{/col} {col4}{headline type=”h5″ style=”heading-diag” text=”Special Heading 3″ align=”text-right”}{/col} {/row} {toggle1 title=”Shortcode”}

{headline type="h5" text="Headline here" align="text-left" style="heading-single"} {headline type="h5" text="Headline here" align="text-center" style="heading-double"} {headline type="h5" text="Headline here" align="text-right" style="heading-diag"}

{/toggle} {spacer height=”60px”} {headline type=”h2″ style=”heading-single” size=”18″ text=”Heading Colors”} {spacer height=”40px”} {row} {col4}{headline type=”h5″ style=”heading-single” text=”Default Color”}{/col} {col4}{headline type=”h5″ style=”heading-single” text=”Theme Color” align=”text-center” color=”color-theme”}{/col} {col4}{headline type=”h5″ style=”heading-single” text=”Purple Color” align=”text-right” color=”color-purple”}{/col} {/row} {row} {col4}{headline type=”h5″ style=”heading-double” text=”Orange Color” color=”color-orange”}{/col} {col4}{headline type=”h5″ style=”heading-double” text=”Success Color” align=”text-center” color=”color-success”}{/col} {col4}{headline type=”h5″ style=”heading-double” text=”Warning Color” align=”text-right” color=”color-warning”}{/col} {/row} {row} {col4}{headline type=”h5″ style=”heading-diag” text=”Info Color” color=”color-info”}{/col} {col4}{headline type=”h5″ style=”heading-diag” text=”Danger Color” align=”text-center” color=”color-danger”}{/col} {col4}{/col} {/row} {toggle1 title=”Shortcode”}

{headline type="h5" text="Headline here" color="color-theme"} {headline type="h5" text="Headline here" color="color-purple"} {headline type="h5" text="Headline here" color="color-orange"} {headline type="h5" text="Headline here" color="color-success"} {headline type="h5" text="Headline here" color="color-warning"} {headline type="h5" text="Headline here" color="color-info"} {headline type="h5" text="Headline here" color="color-danger"}

{/toggle} {spacer height=”60px”} {headline type=”h2″ style=”heading-single” size=”18″ text=”Text Alignment”} {spacer height=”40px”} {row} {col4}

Align Left

Vestibulum vitae risus a erat mollis lac in venenatis tellus. Morbi et tristique lacus. Aenean metus placerat sagittis nec vel justo.

{/col} {col4}

Align Center

Vestibulum vitae risus a erat mollis lac in venenatis tellus. Morbi et tristique lacus. Aenean metus placerat sagittis nec vel justo.

{/col} {col4}

Align Right

Vestibulum vitae risus a erat mollis lac in venenatis tellus. Morbi et tristique lacus. Aenean metus placerat sagittis nec vel justo.

{/col} {/row} {spacer height=”60px”} {headline type=”h2″ style=”heading-single” size=”18″ text=”Dropcaps”} {spacer height=”40px”} {row} {col4}

{dropcap1 text=”W”}hasellu lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum.

{/col} {col4}

{dropcap2 text=”W”}hasellu lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum.

{/col} {col4}

{dropcap3 text=”W”}hasellu lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Nullam sed massa quis elit sagittis tempor.

{/col} {/row} {toggle1 title=”Shortcode”}

{dropcap1 text="W"} {dropcap2 text="W"} {dropcap3 text="W"}

{/toggle} {spacer height=”60px”} {headline type=”h2″ style=”heading-single” size=”18″ text=”Paragraphs”} {spacer height=”40px”} {row} {col6}

Lead Paragraph

Vestibulum vitae risus a erat mollis lac in venenatis tellus. Morbi et tristique lacus. Aenean metus placerat sagittis nec vel justo.

{/row} {col6}

Bold

Vestibulum vitae risus a erat mollis lac in venenatis tellus. Morbi et tristique lacus.

Italic

Vestibulum vitae risus a erat mollis lac in venenatis tellus. Morbi et tristique lacus.

{/col} {/row}

Posted on by GM in Elements Leave a comment