Typography List
h2
Code
Example Usage:
[h2=hidden1]abc1[/h2]
Example Code Output:
<h2 class="hidden1">abc1</h2>
Example Output:
abc1
url
Code
Example Usage:
[url=http://joomlavi.com]joomlavi.com[/url]
Example Code Output:
<a href="http://joomlavi.com">joomlavi.com</a>
Example Output:
Box Style - Sticky
Code
Example Usage:
[sticky]Your clip note goes here![/sticky]
Example Code Output:
<p class="box-sticky">Your clip note goes here!</p>
Example Output:
Your clip note goes here!
Blocknumber 1
Code
Example Usage:
[blocknumber1=01]Your content goes here![/blocknumber1]
Example Code Output:
<p class="blocknumber"><span class="bignumber-1">01</span>Your content goes here!</p>
Example Output:
01Your content goes here!
Blocknumber 2
Code
Example Usage:
[blocknumber2=01]Your content goes here![/blocknumber2]
Example Code Output:
<p class="blocknumber"><span class="bignumber-2">01</span>Your content goes here!</p>
Example Output:
01Your content goes here!
Blocknumber 3
Code
Example Usage:
[blocknumber3=01]Your content goes here![/blocknumber3]
Example Code Output:
<p class="blocknumber"><span class="bignumber-3">01</span>Your content goes here!</p>
Example Output:
01Your content goes here!
Box Grey
Code
Example Usage:
[box-grey]Your content goes here![/box-grey]
Example Code Output:
[box-grey]Your content goes here![/box-grey]
Example Output:
[box-grey]Your content goes here![/box-grey]
Box Hilite
Code
Example Usage:
[box-hilite]Your content goes here![/box-hilite]
Example Code Output:
[box-hilite]Your content goes here![/box-hilite]
Example Output:
[box-hilite]Your content goes here![/box-hilite]
Note
Code
Example Usage:
[note]Your content goes here![/note]
Example Code Output:
<p class="note bg3"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
notice
Code
Example Usage:
[notice]Notice[/notice]
Example Code Output:
<p class="error bg1"><span class="icon"> </span>Notice</p>
Example Output:
Notice
Paragraph Style - Message
Code
Example Usage:
[message]Your text here[/message]
Example Code Output:
<p class="message bg2"><span class="icon"></span>Your text here</p>
Example Output:
Download
Code
Example Usage:
[download]Your content goes here![/download]
Example Code Output:
<p class="download bg4"><span class="icon"></span>Your content goes here!</p>
Example Output:
Your content goes here!
Doc
Code
Example Usage:
[doc]Your content goes here![/doc]
Example Code Output:
<p class="doc bg5"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
Cart
Code
Example Usage:
[cart]Your content goes here![/cart]
Example Code Output:
<p class="cart bg1"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
Mobi
Code
Example Usage:
[mobi]Your content goes here![/mobi]
Example Code Output:
<p class="mobi bg2"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
Tag
Code
Example Usage:
[tag]Your content goes here![/tag]
Example Code Output:
<p class="tag bg4"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
Paragraph Style - Photo
Code
Example Usage:
[photo]Your message goes here![/photo]
Example Code Output:
<p class="photo bg3"><span class="icon"> </span>Your message goes here!</p>
Example Output:
Your message goes here!
Tips
Code
Example Usage:
[tips]Your content goes here![/tips]
Example Code Output:
<p class="tips bg1"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
Key
Code
Example Usage:
[key]Your content goes here![/key]
Example Code Output:
<p class="key bg2"><span class="icon"> </span>Your content goes here!</p>
Example Output:
Your content goes here!
Icon
Code
Example Usage:
[icon=search][/icon]Graciously provided by Glyphicons
Example Code Output:
<i class="icon-search"></i>Graciously provided by Glyphicons
Example Output:
Graciously provided by Glyphicons
Example Usage:
<div class="input-prepend"><span class="add-on">[icon=envelope][/icon]</span><input type="text" id="inputIcon" class="span2"></div>
Example Code Output:
<div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span><input type="text" id="inputIcon" class="span2"></div>
Example Output:
Example Usage:
<a href="#" class="btn btn-large">[icon=comment][/icon] Comment</a>
Example Code Output:
<a href="#" class="btn btn-large"><i class="icon-comment"></i> Comment</a>
Example Output:
Example Usage:
<a href="#" class="btn btn-primary">[icon=user icon-white][/icon] User</a>
Example Code Output:
<a href="#" class="btn btn-primary"><i class="icon-user icon-white"></i> User</a>
Example Output:
badge
Code
Example Usage:
[badge=top]<div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div>[/badge]
Example Code Output:
<div class="jv-module module-badge badge-top"><span class="badge"></span><div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div></div>
Example Output:
Use module suffix: _badge badge-top to put this badge on any module you like!
Example Usage:
[badge=new]<div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div>[/badge]
Example Code Output:
<div class="jv-module module-badge badge-new"><span class="badge"></span><div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div></div>
Example Output:
Use module suffix: _badge badge-new to put this badge on any module you like!
Example Usage:
[badge=hot]<div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div>[/badge]
Example Code Output:
<div class="jv-module module-badge badge-hot"><span class="badge"></span><div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div></div>
Example Output:
Use module suffix: _badge badge-hot to put this badge on any module you like!
Example Usage:
[badge=pick]<div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div>[/badge]
Example Code Output:
<div class="jv-module module-badge badge-pick"><span class="badge"></span><div style="padding: 30px 25px;">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div></div>
Example Output:
Use module suffix: _badge badge-pick to put this badge on any module you like!
Youtube
Code
Example Usage:
[youtube=width="530" height="350"]DgwtRpf60xI[/youtube]
Example Code Output:
<a class="btn" data-toggle="modal" href="#mdDgwtRpf60xI">Watch Video</a>
<div class="btmodal fade hide" id="mdDgwtRpf60xI">
<div class="modal-body">
<iframe width="530" height="350" src="http://www.youtube.com/embed/DgwtRpf60xI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Example Output:
Vimeo
Code
Example Usage:
[vimeo=width="500" height="281"]46497874[/vimeo]
Example Code Output:
<a class="btn" data-toggle="modal" href="#md46497874">Watch Video</a>
<div class="btmodal fade hide" id="md46497874">
<div class="modal-body">
<iframe width="500" height="281" src="http://player.vimeo.com/video/46497874" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
Example Output:
Alerts
Code
Example Usage:
[alert=alert-block]<h4 class="alert-heading">Warning!</h4> Best check yo self, you're not looking too good.[/alert]
Example Code Output:
<div class="alert alert-block"> <button class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">Warning!</h4> Best check yo self, you're not looking too good. </div>
Example Output:
Warning!
Best check yo self, you're not looking too good.
Example Usage:
[alert=alert-error alert-block]<h4 class="alert-heading">Oh snap!</h4> Change a few things up and try submitting again.[/alert]
Example Code Output:
<div class="alert alert-error alert-block"> <button class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">Oh snap!</h4> Change a few things up and try submitting again. </div>
Example Output:
Oh snap!
Change a few things up and try submitting again.
Example Usage:
[alert=alert-success alert-block]<h4 class="alert-heading">Well done!</h4> You successfully read this important alert message.[/alert]
Example Code Output:
<div class="alert alert-success alert-block"> <button class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">Well done!</h4> You successfully read this important alert message. </div>
Example Output:
Well done!
You successfully read this important alert message.
Example Usage:
[alert=alert-info alert-block]<h4 class="alert-heading">Heads up!</h4> This alert needs your attention, but it's not super important.[/alert]
Example Code Output:
<div class="alert alert-info alert-block"> <button class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">Heads up!</h4> This alert needs your attention, but it's not super important. </div>
Example Output:
Heads up!
This alert needs your attention, but it's not super important.Legend
Code
Example Usage:
[legend=Legend style]Your content goes here![/legend]
Example Code Output:
<div class="legend"><h3 class="legend-title">Legend style</h3><p>Your content goes here!</p></div>
Example Output:
Legend style
Your content goes here!
Legend-Hilite
Code
Example Usage:
[legend-hilite=style highlight]Your content goes here![/legend-hilite]
Example Code Output:
[legend-hilite=style highlight]Your content goes here![/legend-hilite]
Example Output:
[legend-hilite=style highlight]Your content goes here![/legend-hilite]
