Box

Default Box

<div class="box">
-- content of the box --
</div><!--/box-->

Box With Left Image

<div class="box">
<img class="align-left" src="/themes/xarapro/images/demo/placeholder/100-100.png" alt="image">And some text inside the box..
</div><!--/box-->

Box With Right Image

<div class="box">
<img class="align-right" src="/themes/xarapro/images/demo/placeholder/100-100.png" alt="image">And some text inside the box..
</div><!--/box-->

Responsive Box - Two

<div class="items">
<div class="box">
box one content
</div><!-- /box -->
<div class="box">
box two content
</div><!-- /box -->
</div><!-- /items -->

Responsive Box - Three

<div class="items">
<div class="box">
box one content
</div><!-- /box -->
<div class="box">
box two content
</div><!-- /box -->
<div class="box">
box three content
</div><!-- /box -->
</div><!-- /items -->

Responsive Box - Four

<div class="items">
<div class="box">
box one content
</div><!-- /box -->
<div class="box">
box two content
</div><!-- /box -->
<div class="box">
box three content
</div><!-- /box -->
<div class="box">
box four content
</div><!-- /box -->
</div><!-- /items -->

Primary Box

<div class="box primary">
-- content inside the box --
</div><!-- /box -->

Secondary Box

<div class="box secondary">
-- content inside the box --
</div><!-- /box -->

Dark Box

<div class="box dark">
-- content inside the box --
</div><!-- /box -->

Light Box

<div class="box light">
-- content inside the box --
</div><!-- /box -->

Black Box

<div class="box black">
-- content inside the box --
</div><!-- /box -->

White Box

<div class="box white">
-- content inside the box --
</div><!-- /box -->

Info Box

<div class="box info">
-- content inside the box --
</div><!-- /box -->

Success Box

<div class="box success">
-- content inside the box --
</div><!-- /box -->

Warning Box

<div class="box warning">
-- content inside the box --
</div><!-- /box -->

Danger Box

<div class="box danger">
-- content inside the box --
</div><!-- /box -->