Content Library > Short Code Snippets
You can insert any of the elements below into any page. simply by copying the HTML code snippet
TYPOGRAPHY
H1 - Baloo Tamma
H2 - Poppins
H3 - Poppins
H4 - Poppins
H5 - Poppins
H6- Poppins
Body paragraph text - Poppins
H1- Title with colored bottom-border
<div class="fancy-title title-bottom-border">
<h1>H1- Title with <span>colored</span> bottom-border</h1>
</div>
H3 - Title with colored bottom-border
<div class="fancy-title title-bottom-border">
<h3>H3 - Title with <span>colored</span> bottom-border</h3>
</div>
Centered Title with dotted border
<div class="fancy-title title-dotted-border title-center">
<h1>Centered Title with <span>dotted</span> border</h1>
</div>
Color Buttons with Icons
<a href="#" class="button button-3d button-rounded button-amber"><i class="icon-ok"></i>Orange</a>Red
<a href="#" class="button button-3d button-rounded button-red"><i class="icon-off"></i>Red</a>Blue
<a href="#" class="button button-3d button-rounded button-blue"><i class="icon-book3"></i>Blue</a>Yellow
<a href="#" class="button button-3d button-rounded button-yellow button-light"><i class="icon-trash2"></i>Yellow</a>Green
<a href="#" class="button button-3d button-rounded button-green"><i class="icon-repeat"></i>Green</a>Brown
<a href="#" class="button button-3d button-rounded button-brown"><i class="icon-play-circle"></i>Brown</a>
Aqua
<a href="#" class="button button-3d button-rounded button-aqua"><i class="icon-inbox"></i>Aqua</a>Purple
<a href="#" class="button button-3d button-rounded button-purple"><i class="icon-lock3"></i>Purple</a>Leaf
<a href="#" class="button button-3d button-rounded button-leaf"><i class="icon-tags"></i>Leaf</a>Pink
<a href="#" class="button button-3d button-rounded button-pink"><i class="icon-bookmark2"></i>Pink</a>Dirty Green
<a href="#" class="button button-3d button-rounded button-dirtygreen"><i class="icon-map-marker2"></i>Dirty Green</a>Black
<a href="#" class="button button-3d button-rounded button-black"><i class="icon-hand-right"></i>Black</a>Teal
<a href="#" class="button button-3d button-rounded button-teal"><i class="icon-signal"></i>Teal</a>
Mini Button
<a href="#" class="button button-mini button-rounded button-amber">Learn More</a>
Large Button
<a href="#" class="button button-large button-rounded button-amber">Learn More</a>
Extra Large Button
<a href="#" class="button button-xlarge button-rounded button-amber">Learn More</a>
3D Button
<a href="#" class="button button-3d button-rounded button-amber">Learn More</a>
Huge Button
<a href="#" class="button button-desc button-3d button-rounded button-green center">Open an Account<span>Free Forever, Instant Activation</span></a>
Stretch Button
<button type="button" class="btn btn-primary btn-lg btn-block">Stretch Button</button>
Bounce Animations
<img src="../images/icons/performance.png" class="notopmargin bounce animated" alt="Image" title="Image" data-animate="bounce">
Bounce in Left Animations
<img src="../images/icons/performance.png" class="notopmargin bounceInLeft animated" alt="Image" title="Image" data-animate="bounceInLeft">
Bounce in Right Animations
<img src="../images/icons/performance.png" class="notopmargin bounce animated" alt="Image" title="Image" data-animate="bounce">
Fade In Animations
<img src="../images/icons/performance.png" class="notopmargin bounce animated" alt="Image" title="Image" data-animate="bounce">
Flip In Animations
<img src="../images/icons/performance.png" class="notopmargin bounce animated" alt="Image" title="Image" data-animate="bounce">
Image Panels (3 Panels in 3 Columns)
<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img alt="image" src="../images/auto-loan3.jpg" style="display: block;"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img alt="image" src="../images/auto-loan3.jpg" style="display: block;"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img alt="image" src="../images/auto-loan3.jpg" style="display: block;"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> </div>
Blue Panel
Panel title
Panel content
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body"> Panel content </div>
</div>
Fancy Dividers
<div class="divider divider-center"><i class="icon-cloud"></i></div>
<div class="divider divider-border divider-center"><i class="icon-email2"></i></div>
Promo Box
<div class="promo promo-light bottommargin">
<h3>CALL TO ACTION ...</h3>
<span>To learn more or sign up</span> <a href="#" class="button button-3d button-rounded button-amber"><i class="icon-ok"></i>Apply Now</a></div>
Bullet Lists with Icons
- Icon List 1
- Icon List 2
- Icon List 3
- Icon List 4
<ul class="iconlist">
<li><i class="icon-ok-sign"></i> Icon List 1</li> <li><i class="icon-ok-sign"></i> Icon List 2</li>
<li><i class="icon-ok-sign"></i> Icon List 3</li> <li><i class="icon-ok-sign"></i> Icon List 4</li></ul>
- Icon List 1
- Icon List 2
- Icon List 3
- Icon List 4
<ul class="iconlist">
<li><i class="icon-leaf"></i> Icon List 1</li><li><i class="icon-leaf"></i> Icon List 2</li><li><i class="icon-leaf"></i> Icon List 3</li>
<li><i class="icon-leaf"></i> Icon List 4</li> </ul>
Panel
Panel title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, at, vitae, veritatis, temporibus soluta accusamus eum accusantium incidunt eius quisquam suscipit inventore neque. Distinctio, impedit.
<div class="col_half panel panel-default col_last">
<div class="panel-heading">
<h2 class="panel-title">Panel title</h2>
</div>
<div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, at, vitae, veritatis, temporibus soluta accusamus eum accusantium incidunt eius quisquam suscipit inventore neque. Distinctio, impedit. </div>
</div>
Pricing Table
<div class="pricing pricing-5 bottommargin clearfix">
<div class="pricing-box pricing-minimal">
<div class="pricing-title">
<h3>Product 1</h3>
<span>Product Feature</span> </div>
<div class="pricing-price"> <span class="price-unit">#</span>0<span class="price-tenure">/mo</span> </div>
<div class="pricing-action"> <a href="#" class="btn btn-danger btn-block">Get Started</a> </div>
</div>
<div class="pricing-box pricing-minimal best-price">
<div class="pricing-title">
<h3>Product 2</h3>
<span>Product Feature</span> </div>
<div class="pricing-price"> <span class="price-unit">$</span>12<span class="price-tenure">/mo</span> </div>
<div class="pricing-action"> <a href="#" class="btn btn-danger btn-block bgcolor border-color">Get Started</a> </div>
</div>
<div class="pricing-box pricing-minimal">
<div class="pricing-title">
<h3>Product 3</h3>
<span>Product Feature</span> </div>
<div class="pricing-price"> <span class="price-unit">$</span>19<span class="price-tenure">/mo</span> </div>
<div class="pricing-action"> <a href="#" class="btn btn-danger btn-block">Get Started</a> </div>
</div>
<div class="pricing-box pricing-minimal">
<div class="pricing-title">
<h3>Product 4</h3>
<span>Product Feature</span> </div>
<div class="pricing-price"> <span class="price-unit">$</span>29<span class="price-tenure">/mo</span> </div>
<div class="pricing-action"> <a href="#" class="btn btn-danger btn-block">Get Started</a> </div>
</div>
<div class="pricing-box pricing-minimal">
<div class="pricing-title">
<h3>Product 5</h3>
<span>Product Feature</span> </div>
<div class="pricing-price"> <span class="price-unit">$</span>39<span class="price-tenure">/mo</span> </div>
<div class="pricing-action"> <a href="#" class="btn btn-danger btn-block">Get Started</a> </div>
</div>
</div>
<div class="clear"></div>
Comparison Table
| Product 1 | Product 2 | Product3 | |
|---|---|---|---|
| Feature | 1 GB | 5 GB | 20 GB |
| Feature | 10 GB | 100 GB | 500 GB |
| Feature | 100 | 1000 | 5000 |
| Feature | 100 | 1000 | 5000 |
| Sign Up | Sign Up | Sign Up |
<div class="table-responsive">
<table class="table table-hover table-comparison nobottommargin">
<thead>
<tr>
<th> </th>
<th>Product 1</th>
<th>Product 2</th>
<th>Product3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Feature</td>
<td>1 GB</td>
<td>5 GB</td>
<td>20 GB</td>
</tr>
<tr>
<td>Feature</td>
<td>10 GB</td>
<td>100 GB</td>
<td>500 GB</td>
</tr>
<tr>
<td>Feature</td>
<td>100</td>
<td>1000</td>
<td>5000</td>
</tr>
<tr>
<td>Feature</td>
<td>100</td>
<td>1000</td>
<td>5000</td>
</tr>
<tr>
<td> </td>
<td><a href="#" class="btn btn-default">Sign Up</a></td>
<td><a href="#" class="btn btn-default">Sign Up</a></td>
<td><a href="#" class="btn btn-default">Sign Up</a></td>
</tr>
</tbody>
</table>
</div>
Alert Boxes
Well done! You successfully read this important alert message.
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="icon-gift"></i><strong>Well done!</strong> You successfully read this <a href="#" class="alert-link">important alert message</a>. </div>
Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="icon-hand-up"></i><strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>
Warning! Better check this out, it's very important
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="icon-warning-sign"></i><strong>Warning!</strong> Better check this out, it's very important </div>
Responsive Table
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table table-bordered nobottommargin">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
Collapsible Panel
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-group nobottommargin" id="accordion">
<div class="panel panel-default">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed"> Collapsible Group Item #1 </a> </div>
<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="" aria-expanded="true"> Collapsible Group Item #2 </a> </div>
<div id="collapseTwo" class="panel-collapse collapse in" aria-expanded="true">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed" aria-expanded="false"> Collapsible Group Item #3 </a> </div>
<div id="collapseThree" class="panel-collapse collapse" aria-expanded="false">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
</div>
</div>
</div>
Accordion
Our Mission
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
What we Do?
Our Company's Values
<div class="accordion accordion-bg clearfix">
<div class="acctitle acctitlec"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>Our Mission</div>
<div class="acc_content clearfix" style="display: block;">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>What we Do?</div>
<div class="acc_content clearfix" style="display: none;">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</div>
<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>Our Company's Values</div>
<div class="acc_content clearfix" style="display: none;">Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>
2 Columns
Half Width
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.Half Width (Last)
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.<div>
<div class="col_half">
<h5>Half Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="col_half col_last">
<h5>Half Width (Last)</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="clear"></div>
</div>
1/4 and 3/4 Columns
1/4 Width
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante.3/4 Width (Last)
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.<div>
<div class="col_one_fourth">
<h5>1/4 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante.
</div>
<div class="col_three_fourth col_last">
<h5>3/4 Width (Last)</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
</div>
<div class="clear"></div>
</div>
Lightbox Images
<div class="masonry-thumbs col-3 clearfix" style="margin-right: -1px; position: relative; height: 107px;">
<a href="../images/auto-loan3.jpg" data-lightbox="image" style="width: 143px; position: absolute; left: 0px; top: 0px;">
<img src="../images/auto-loan3.jpg" alt="Single Image">
<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
</a>
<a href="../images/auto-loan3.jpg" data-lightbox="image" style="width: 143px; position: absolute; left: 143px; top: 0px;">
<img src="../images/auto-loan3.jpg" alt="Single Image">
<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
</a>
<a href="../images/auto-loan3.jpg" data-lightbox="image" style="width: 143px; position: absolute; left: 286px; top: 0px;">
<img src="../images/auto-loan3.jpg" alt="Single Image">
<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
</a>
</div>
Tabbed Content
<div class="tabs customjs clearfix" id="tabs">
<ul class="tab-nav clearfix">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
<div class="tab-container">
<div class="tab-content clearfix" id="tab1"> Tab 1 Content </div>
<div class="tab-content clearfix" id="tab2"> Tab 2 Content </div>
<div class="tab-content clearfix" id="tab3"> Tab 3 Content </div>
<div class="tab-content clearfix" id="tab4"> Tab 4 Content </div>
</div>
</div>
Download the app
