<h2>Image</h2>
You can display your images with or without frames and align them using the default WordPress features, like Caption and alignment!

[caption id="attachment_32" align="alignleft" width="150" caption="Yellow Shoes"]<img class="size-thumbnail wp-image-32" title="Shoes" src="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-1-150x150.jpg" alt="" width="150" height="150" />[/caption]

[caption id="attachment_28" align="alignleft" width="150" caption="Green Glasses"]<img class="size-thumbnail wp-image-28" title="Glasses" src="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-2-150x150.jpg" alt="" width="150" height="150" />[/caption]

[caption id="attachment_23" align="alignleft" width="150" caption="Vintage"]<img class="size-thumbnail wp-image-23" title="Clothes" src="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-3-150x150.jpg" alt="" width="150" height="150" />[/caption]

[divider]
<h2>Lightbox</h2>
Show your images with style and beautiful!

[lightbox href="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-1.jpg" title="Yellow Shoes" height="undefined" group="photos"]

[caption id="attachment_32" align="alignleft" width="150" caption="Yellow Shoes"]<img class="size-thumbnail wp-image-32" title="Shoes" src="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-1-150x150.jpg" alt="" width="150" height="150" />[/caption]

[/lightbox]

[lightbox href="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-2.jpg" title="Green" height="undefined" group="photos"]

[caption id="attachment_28" align="alignleft" width="150" caption="Green Glasses"]<img class="size-thumbnail wp-image-28" title="Glasses" src="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-2-150x150.jpg" alt="" width="150" height="150" />[/caption]

[/lightbox]

[lightbox href="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-3.jpg" title="Vintage" height="undefined" group="photos"]

[caption id="attachment_23" align="alignleft" width="150" caption="Vintage"]<img class="size-thumbnail wp-image-23" title="Clothes" src="http://www.wpthemetoolset.com/bonfire/wp-content/uploads/2012/03/post-image-3-150x150.jpg" alt="" width="150" height="150" />[/caption]

[/lightbox]

[divider]
<h2>Google Chart</h2>
Display infos to your client with the Google Chart.
<p style="text-align: center;">[chart data="70,25,20.01,4.99" labels="Bing|Google|Yahoo|Other" colors="058DC7,50B432,ED561B,EDEF00" bg="bg,s,ffffff" size="590x250" title="3D Chart" type="pie"]</p>
[divider]
<h2>Google Maps</h2>
Show where you're with Google Maps.

[gmap width="auto" height="300" address="Alameda Sao caetano, 850, Sao Caetano do Sul" zoom="14" align="center"]

[divider]
<h2>Video</h2>
You can add videos in your website too! Support to <strong>HTML 5 Video, Flash, Youtube, Vimeo and DailyMotion.</strong>

[row]

[one_third_resp]

[video type="vimeo" clip_id="15068747" width="600" height="400"]
<h4 style="text-align: center;">VIMEO</h4>
[/one_third_resp]

[one_third_resp]

[video type="flash" src="http://www.youtube.com/v/PoTEnaAI9Fo" play="false" width="600" height="400"]
<h4 style="text-align: center;">FLASH</h4>
[/one_third_resp]

[one_third_resp]

[video type="youtube" clip_id="1w7OgIMMRc4" width="600" height="400"]
<h4 style="text-align: center;">YOUTUBE</h4>
[/one_third_resp]

[/row]

[video type="html5" preload="true" poster="http://video-js.zencoder.com/oceans-clip.png" mp4="http://video-js.zencoder.com/oceans-clip.mp4" webm="http://video-js.zencoder.com/oceans-clip.webm" ogg="http://video-js.zencoder.com/oceans-clip.ogv" height="400"]
<h4 style="text-align: center;">HTML5</h4>
[divider]
<h2>Dropcaps</h2>
[one_third]

[dropcap]L[/dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue vehicula lacus in cursus. In consectetur, urna pretium viverra egestas, mauris odio iaculis diam, at pellentesque metus est vitae nibh.

[/one_third]

[one_third]

[dropcap]L[/dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue vehicula lacus in cursus. In consectetur, urna pretium viverra egestas, mauris odio iaculis diam, at pellentesque metus est vitae nibh.

[/one_third]

[one_third_last]

[dropcap]L[/dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue vehicula lacus in cursus. In consectetur, urna pretium viverra egestas, mauris odio iaculis diam, at pellentesque metus est vitae nibh.

[/one_third_last]

[divider]

[one_half]
<h2>Quote</h2>
Use quotes on your layout!

[blockquote]This is a amazing quotation.[/blockquote]

You can use the <em>cite </em>attribute...

[blockquote cite="Awesome Man"]This is one of the most amazing creation that I ever have created![/blockquote]

You can too float the quote on content!

[/one_half]

[one_half_last]
<h2>Highlight</h2>
Feature a text area with highlight shortcode.

[highlight]Donec vehicula.[/highlight] Nullam, in [highlight type="dark"]dapibus velit aliquet sit amet[/highlight]. Nullam tempus, in sem. [highlight color="de3e0d"]Curabitur[/highlight] adipiscing.

[/one_half_last]

[divider]

[one_half]
<h2>Pre</h2>
Use it to show some text that don't need formatation.

[pre]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue vehicula lacus in cursus.

In consectetur, urna pretium viverra egestas, mauris odio iaculis diam, at pellentesque metus est vitae nibh. Etiam neque enim, auctor in iaculis nec, convallis id dolor.

[/pre]

[/one_half]

[one_half_last]
<h2>Code</h2>
Show any code to the reader.

[code]

background:url("sc_images/dropcap_black.png") no-repeat scroll 0px 0px transparent;
color: #fff;
line-height: 42px;
width: 40px;
margin: 0 8px -4px 0;
[/code]

[/one_half_last] 