Shortcodes: Content Boxes

Icon Boxes

In this example, the icon-boxes are set up in a 4 column grid system using row-fluid and span3.

First Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More

Second Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More

Third Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More

Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More
<div class="row-fluid">
  <div class="iconbox span3">
    <div class="iconcircle">
      <i class="fa fa-desktop"></i>
    </div>
    <div class="iconbox-content">
...
</div>
  </div>
<div
class="iconbox span3">...</div> <div class="iconbox span3">...</div> <div class="iconbox span3">...</div> </div>


<div class="row-fluid">
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-desktop"></i>
</div>
<div class="iconbox-content">
<h4>First Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Read More</a>
</div>
</div>
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-sliders"></i>
</div>
<div class="iconbox-content">
<h4>Second Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Read More</a>
</div>
</div>
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-flag"></i>
</div>
<div class="iconbox-content">
<h4>Third Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Read More</a>
</div>
</div>
<div class="iconbox span3">
<div class="iconcircle">
<i class="fa fa-book"></i>
</div>
<div class="iconbox-content">
<h4>Fourth Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn btn-default" href="#">Read More</a>
</div>
</div>
</div>



Text Boxes

Some heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div class="text-box">
  <div class="text-box-heading">Some heading</div>
  <div class="arrow-down"></div>
  <p>Lorem ipsum ...</p>
</div>


Image Boxes

In this example, the icon-boxes are set up in a 3 column grid system using row-fluid and span4.

img1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

img2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

img3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

<div class="row-fluid">
  <div class="image-box span4">
    <img src="..."  class="img-responsive">
    <div class="image-box-content"><p>Lorem ipsum ...</p></div>
  </div>
  <div class="image-box span4">
    ...
  </div>
  <div class="image-box span4">
    ...
  </div>
</div>


<div class="row-fluid">
<div class="image-box span4">
<img src="http://placehold.it/600x300" alt="img1" class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="text-align:center;"><a class="btn btn-default" href="#">Read More</a></p></div>
</div>
<div class="image-box span4">
<img src="http://placehold.it/600x300" alt="img2" class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="text-align:center;"><a class="btn btn-default" href="#">Read More</a></p></div>
</div>
<div class="image-box span4">
<img src="http://placehold.it/600x300" alt="img3" class="img-responsive">
<div class="image-box-content"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="text-align:center;"><a class="btn btn-default" href="#">Read More</a></p></div>
</div>
</div>


Promotion Boxes

Use Theme Lambda's promotion boxes to grab the attention of your visitors:

heading prom-box-default

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

heading prom-box-info

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

heading prom-box-warning

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

heading prom-box-danger

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

<div class="prom-box prom-box-default">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-info">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-warning">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-danger">
  <h3>...</h3>
  <p>...</p>
</div>

Theme Lambda's promotion boxes are very customizable and can contain any html content:

heading prom-box-default

Button

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

<div class="prom-box prom-box-default">
  <h3>...</h3>
  <a class="btn btn-danger pull-right" href="#"><i class="fa fa-share fa-lg"></i> Button</a>
  <p>...</p>
</div>

You can even add shadow classes:

shadow1

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

shadow2

Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.

<div class="prom-box prom-box-default shadow1">
  <h3>...</h3>
  <p>...</p>
</div>

<div class="prom-box prom-box-default shadow2">
  <h3>...</h3>
  <p>...</p>
</div>