Navigation

Tagline Boxes

  1. Home
  2. Tagline Boxes
Tagline Boxes

Tagline Boxes

These boxes can created just only applying class .tagline-box with following markup


<div class="col-sm-12 primary border-top tagline-box">
	<div class="icon"><span class="fa fa-list-alt"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is primary tagline box</p>
</div>

.primary can be replaced with other color classes like .success, .info, .warning, .danger, .default etc

This is a tagline-box

This is basic tagline box

This is a tagline-box

This is primary tagline box

This is a tagline-box

This is success tagline box

This is a tagline-box

This is info tagline box

This is a tagline-box

This is warning tagline box

This is a tagline-box

This is danger tagline box

You can make them more creative by applying .bg-* casses to the top container having .tagline-box class

This is a tagline-box

This is bg-success tagline box

This is a tagline-box

This is bg-white tagline box

Tagline Boxes with pointer New Since v1.1

just add the class .pointer with tagline box and we will add a pointer according to your settings...i.e. Border side, border-color

This is a tagline-box

This is primary tagline box with pointer

This is a tagline-box

This is primary tagline box with pointer

This is a tagline-box

This is primary tagline box with pointer

This is a tagline-box

This is primary tagline box with pointer


		  	
<!-- Tagline Boxes --> 
<div class="col-sm-12 tagline-box">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>
<div class="col-sm-12 primary border-top tagline-box">
	<div class="icon"><span class="fa fa-list-alt"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>
<div class="col-sm-12 success border-right tagline-box">
	<div class="icon"><span class="fa fa-quote-right"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>
<div class="col-sm-12 info border-bottom tagline-box">
	<div class="icon"><span class="fa fa-cloud"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>
<div class="col-sm-12 warning border-left tagline-box">
	<div class="icon"><span class="fa fa-reply"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>
<div class="col-sm-12 danger border-top tagline-box">
	<div class="icon"><span class="fa fa-smile-o"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>	
								  	
<p>You can make them more creative by applying <code>.bg-*</code> casses </p>
								  	
<div class="col-sm-12 primary border-left bg-success tagline-box">
	<div class="icon"><span class="fa fa-list-alt"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>
								  	
<div class="col-sm-12 warning border-left bg-white tagline-box">
	<div class="icon"><span class="fa fa-quote-right"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is basic tagline box</p>
</div>

<!-- Tagline boxes with pointer (Since update v1.1) -->

<div class="col-sm-12 primary tagline-box pointer">
	<div class="icon"><span class="fa fa-quote-right"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is primary tagline box with pointer</p>
</div>
<div class="col-sm-12 success border-right tagline-box pointer">
	<div class="icon"><span class="fa fa-quote-right"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is success tagline box with pointer</p>
</div>
<div class="col-sm-12 danger border-top tagline-box pointer">
	<div class="icon"><span class="fa fa-quote-right"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is danger tagline box with pointer</p>
</div>
<div class="col-sm-12 warning border-bottom tagline-box pointer">
	<div class="icon"><span class="fa fa-quote-right"></span></div>
	<h3 class="heading">This is a tagline-box</h3>
	<p>This is warning tagline box with pointer</p>
</div>