Circle Dividers Full

Here are some examples of the circle Dividers.

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


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


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


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

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

Circle Dividers Half

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

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


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


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


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

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

Special Dividers

Here are some examples of the special Dividers.

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


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


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


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


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


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


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


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

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

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"}

Tooltips

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

Vivamus default 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 euismod semper.

Integer posuere erat a ante Tooltip 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 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 with much Text 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 with much more Text ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

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

Popovers

This is a basic example of the Popover Shortcode.

Popover Left    |    Popover Top    |    Popover Bottom    |    Popover Right


Popover Left Popover Top Popover Bottom Popover Right


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"}

Testimonial Style 1

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

Testimonial Style 2

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

Testimonial Style 3

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

Labels

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

Vivamus 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-primary euismod semper.

Integer posuere erat a ante 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-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-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-danger ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

{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"}

Labels in Headlines

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

Headline H1 new

Headline H2 new

Headline H3 new

Headline H4 new

Headline H5 new
Headline H6 new

Default Lists

Here are some examples of the default List Styles.

  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  1. Facilisis in pretium nisl aliquet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
{list}
  {listing}List Item{/listing}
  {listing}List Item{/listing}
  {listing}List Item{/listing}
{/list}

Using Icons from Font Awesome

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

  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Facilisis in pretium nisl aliquet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
{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}

Ordered Lists

Here are some examples of the ordered List Styles.

{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}
{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}