Components

Here’s a collection of shortcoded components that can be used anywhere in content – pages, posts, Page Blox or custom post Project.

[separator style=»regular»]

[row equal_height=»true» text_shadow=»none»]

[column col=»3″]

[pie_chart color=»#c9b3b3″ value=»29″ label=»Pie Chart Label» chart_align=»text-center» line_width=»15″ width=»120″]

[/column]

[column col=»3″]

[pie_chart color=»#8fa2b8″ value=»68″ label=»Pie Chart, 68%» chart_align=»text-center» line_width=»10″ width=»120″]

[/column]

[column col=»3″]

[pie_chart color=»#869e8b» value=»49″ label=»Pie Chart, 49%» chart_align=»text-center» line_width=»20″ width=»120″]

[/column]

[column col=»3″]

[pie_chart color=»#fa8694″ value=»86″ label=»Pie Chart, 86%» chart_align=»text-center» line_width=»24″ width=»120″]

[/column]

[/row]

[gap height=»60″]

[row text_shadow=»none»]

[column col=»6″]

[tabs_wrapper style=»nav-tabs» justify=»true»]

[tab_content tab_label=»Brochure»]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, tincidunt vitae massa id, consectetur est. Morbi gravida vulputate scelerisque.

Nunc laoreet elit justo, eu commodo risus volutpat id. Aenean ac nis ornare, sagittis quam sagittis. Donec tristique diam dui, non euismod nulla tincidunt nec.

Maybe a progress bar, 49%…

[progress_bar style=»progress-bar-danger» value=»49″ striped=»true»]

[/tab_content]

[tab_content tab_label=»Profiles»]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, tincidunt vitae massa id, consectetur est. Morbi gravida vulputate scelerisque. Mauris urna lorem, dictum quis sem at, suscipit imperdiet nisl. Maecenas a vehicula magna. Fusce nec felis consectetur, eleifend nibh at, iaculis odio. Aliquam ut nisi id tortor lacinia interdum.

[/tab_content]

[tab_content tab_label=»Settings»]

[badge textalign=»pull-left»] 1 [/badge] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, tincidunt vitae massa id, consectetur est. Duis vel placerat nisi. Vestibulum tempus metus eros, non porttitor ipsum ultrices nec. In eleifend nulla dui. Aliquam ut nisi id tortor lacinia interdum nec at magna.

[badge textalign=»pull-left»] 2 [/badge] Aenean ac nis ornare, sagittis quam sagittis. Donec tristique diam dui, non euismod nulla tincidunt nec. In ut sapien id neque fermentum congue et et dui. Quisque pellentesque faucibus mattis. Donec eu sem turpis.

[/tab_content]

[/tabs_wrapper]

[/column]

[column col=»6″]

[tabs_wrapper style=»nav-pills» justify=»false»]

[tab_content tab_label=»Bandage patch»]

check Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, tincidunt vitae massa id, consectetur est. Morbi gravida vulputate scelerisque. Mauris urna lorem, dictum quis sem at, suscipit imperdiet nisl. Maecenas a vehicula magna.

Fusce nec felis consectetur, eleifend nibh at, iaculis odio. Aliquam ut nisi id tortor lacinia interdum nec at magna. Morbi gravida vulputate scelerisque.

[/tab_content]

[tab_content tab_label=»The List»]

[/tab_content]

[tab_content tab_label=»Progress»]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, tincidunt vitae massa id, consectetur est. Morbi gravida vulputate scelerisque. Nunc laoreet elit justo, eu commodo risus volutpat id. Aenean ac nis ornare, sagittis quam sagittis. Donec tristique diam dui, non euismod nulla tincidunt nec.

Maybe a progress bar, 33%…

[progress_bar style=»progress-bar-default» value=»33″ striped=»true»]

[/tab_content]

[/tabs_wrapper]

[/column]

[/row]

[gap height=»60″]

[row text_shadow=»none»]

[column col=»6″]

Mauris cursus gravida lacus, et congue eros. Quisque neque neque, rutrum vitae augue id, tincidunt euismod lectus. Morbi eu felis lectus. Mauris pharetra feugiat orci, a vehicula tortor gravida eu.

[accordion_wrapper]

[accordion_content accordion_label=»Accordion label #1″]

Mauris sodales tellus at luctus tristique. Aenean diam augue, placerat at gravida a, aliquam eget orci. Phasellus id fringilla purus, ac fringilla mi. Integer pharetra fringilla dui a cursus. Proin dui arcu, lacinia quis elit ac, euismod feugiat sapien. Maecenas vitae velit consectetur, faucibus ligula nec, consectetur sapien. Integer aliquam accumsan quam, a venenatis dolor auctor sit amet. Donec rutrum adipiscing congue.

[/accordion_content]

[accordion_content accordion_label=»Accordion label #2″]

[/accordion_content]

[accordion_content accordion_label=»Accordion label #3″]

Integer pharetra fringilla dui a cursus. Proin dui arcu, lacinia quis elit ac, euismod feugiat sapien. Maecenas vitae velit consectetur, faucibus ligula nec, consectetur sapien. Integer aliquam accumsan quam, a venenatis dolor auctor sit amet.

Small title

Donec rutrum adipiscing congue. Mauris sodales tellus at luctus tristique. Aenean diam augue, placerat at gravida a, aliquam eget orci. Phasellus id fringilla purus, ac fringilla mi.

[/accordion_content]

[accordion_content accordion_label=»Accordion label #4″]

<dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>

    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>

    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

[/accordion_content]

[accordion_content accordion_label=»Accordion label #5″]

Pellentesque rhoncus diam ut massa iaculis consequat. Nulla sit amet sem ut risus congue adipiscing sit amet ut enim. Cras ac malesuada libero. Nullam fermentum sollicitudin erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Cras ac malesuada libero

Donec luctus velit quam, eu condimentum risus porta nec. Integer in arcu mauris. Proin et dolor sollicitudin, sollicitudin elit sollicitudin, consequat augue. Ut quis enim ut arcu ultricies sollicitudin. Proin lorem arcu, ullamcorper eu mollis sit amet, vestibulum blandit nisi.

[/accordion_content]

[/accordion_wrapper]

[/column]

[column col=»6″]

[carousel_wrapper]

[carousel_slide slide=»http://policia.cat/wp-content/uploads/2014/02/4896992898_94faf582fb_b.jpg» link=»http://google.com» link_opens=»_blank» caption=»The all American flag»]

[carousel_slide slide=»http://policia.cat/wp-content/uploads/2014/02/4923485443_a1967ff888_b.jpg» link=»http://apple.com» link_opens=»_blank» caption=»New York, New York…»]

[carousel_slide slide=»http://policia.cat/wp-content/uploads/2014/02/4923484517_ac74583850_b.jpg» link_opens=»_self» caption=»Whatta bad rush hour»]

[/carousel_wrapper]

[/column]

[/row]

Components

Simple Pie Chars

Tabber – regular

Tabber – pills

Accordion

Small title

Cras ac malesuada libero

Carousel