We prepared for you three types of icon boxes.
Type 1
Icon Box – type 1
HTML markup:
|
1 2 3 4 5 6 7 8 |
<div class="ct-iconBox media ct-u-marginBottom50"> <div class="h3 ct-iconBox-icon media-left"><small><i class="fa fa-wrench"></i></small></div> <div class="ct-iconBox-content media-body"> <h6 class="ct-iconBox-header ct-u-hr ct-u-hr--left">Our cars work great</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt quis tortor non lobortis. Suspendisse a lacus luctus, luctus libero sed, vulputate est. Donec elementum.</p> </div> </div> |
Type 2
Icon Box type 2
HTML markup:
|
1 2 3 4 5 6 7 8 |
<div class="ct-iconBox ct-iconBox--type2 ct-u-marginBottom80"> <div class="h2 ct-iconBox-icon"><small><i class="fa fa-map-marker"></i></small></div> <div class="ct-iconBox-content"> <h6 class="ct-iconBox-header ct-u-hr ct-u-hr--center">Choose your destination</h6> <p>Lorem ipsum dolor sit amet, consecte adipis suspendisse ma condimentum mau porttitor met mauris, facerit phasellique certimus caesen.</p> <a href="#" class="btn btn-motive"><span>Read More</span></a> </div> </div> |
Type 3
Icon Box – type 3
HTML markup:
|
1 2 3 4 5 6 7 8 |
<div class="ct-iconBox ct-iconBox--type3 media ct-u-marginBottom50"> <div class="h3 ct-iconBox-icon media-left"><small><i class="fa fa-send"></i></small></div> <div class="ct-iconBox-content media-body"> <h6 class="ct-iconBox-header ct-u-hr ct-u-hr--left">Now this is funky</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt quis tortor non lobortis. Suspendisse a lacus luctus, luctus libero sed, vulputate est. Donec elementum.</p> </div> </div> |