Icon Small
Use these premade content sections accordingly, you can use anyone of the 1000+ icon options. If you need to add more rows of content simply copy the corresponding <div class="row"> from the column section you need and simply duplicate it below the first <div class="row">.
- You can use bordered icons or regular icons. Simply replace the
.bordered-icon-*classes inside of the icon span with a size class.fa-5xfor example. - To change a bordered icon to color (inverted) simply add the class
.bordered-icon-colorinside of thespantag your icon is in. - To use square bordered icons instead of circles add class
.no-border-radiusinside of thespantag your icon is in. - Buttons can be added easily using the button pages, check out the basic buttons for example.
Check out the Raleway Icon Options for more info.
2 Column
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.
<!--=== Content 1 ===--> <div class="col-sm-6 text-center"> <span class="ion-beaker bordered-icon-sm"></span> <h4 class="mt15">We do parallax.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> <!--=== Content 2 ===--> <div class="col-sm-6 text-center mt20-xs"> <span class="ion-beer bordered-icon-sm"></span> <h4 class="mt15">We do animations.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.</p> </div>
3 Column
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
We do responsive.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
<!--=== Content 1 ===--> <div class="col-sm-4 text-center"> <span class="ion-beaker bordered-icon-sm"></span> <h4 class="mt15">We do parallax.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> <!--=== Content 2 ===--> <div class="col-sm-4 text-center mt20-xs"> <span class="ion-beer bordered-icon-sm"></span> <h4 class="mt15">We do animations.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> <!--=== Content 3 ===--> <div class="col-sm-4 text-center mt20-xs"> <span class="ion-help-buoy bordered-icon-sm"></span> <h4 class="mt15">We do responsive.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div>
4 Column
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We do responsive.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We help you.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
<!--=== Content 1 ===--> <div class="col-sm-3 text-center"> <span class="ion-beaker bordered-icon-sm"></span> <h4 class="mt15">We do parallax.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> <!--=== Content 2 ===--> <div class="col-sm-3 text-center mt20-xs"> <span class="ion-beer bordered-icon-sm"></span> <h4 class="mt15">We do animations.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> <!--=== Content 3 ===--> <div class="col-sm-3 text-center mt20-xs"> <span class="ion-help-buoy bordered-icon-sm"></span> <h4 class="mt15">We do responsive.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> <!--=== Content 4 ===--> <div class="col-sm-3 text-center mt20-xs"> <span class="ion-help bordered-icon-sm"></span> <h4 class="mt15">We help you.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div>
2 Column Color
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.
<!--=== Content 1 ===--> <div class="col-sm-6 text-center"> <span class="ion-beaker bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do parallax.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> <!--=== Content 2 ===--> <div class="col-sm-6 text-center mt20-xs"> <span class="ion-beer bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do animations.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Nam bibendum in mauris at sollicitudin lacinia.</p> </div>
3 Column Color
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
We do responsive.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.
<!--=== Content 1 ===--> <div class="col-sm-4 text-center"> <span class="ion-beaker bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do parallax.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> <!--=== Content 2 ===--> <div class="col-sm-4 text-center mt20-xs"> <span class="ion-beer bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do animations.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div> <!--=== Content 3 ===--> <div class="col-sm-4 text-center mt20-xs"> <span class="ion-help-buoy bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do responsive.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia.</p> </div>
4 Column Color
We do parallax.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We do animations.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We do responsive.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
We help you.
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.
<!--=== Content 1 ===--> <div class="col-sm-3 text-center"> <span class="ion-beaker bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do parallax.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> <!--=== Content 2 ===--> <div class="col-sm-3 text-center mt20-xs"> <span class="ion-beer bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do animations.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> <!--=== Content 3 ===--> <div class="col-sm-3 text-center mt20-xs"> <span class="ion-help-buoy bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We do responsive.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div> <!--=== Content 4 ===--> <div class="col-sm-3 text-center mt20-xs"> <span class="ion-help bordered-icon-color bordered-icon-sm"></span> <h4 class="mt15">We help you.</h4> <p class="p15xs">Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p> </div>