How to use icon box
This is how the basic icon box markup looks like:
<div class="cg__iconBox">
<div class="cg__iconBox-inner">
<div class="cg__iconbox-iconWrapper cg__iconbox-iconLeft">
<span class="cg__iconbox-icon"></span>
</div><!--/.cg__iconbox-iconWrapper-->
<div class="cg__iconbox-contentWrapper">
<div class="cg__iconbox-titleWrapper">
<h3 class="cg__iconbox-title">[...]</h3>
</div><!--/.cg__iconbox-titleWrapper-->
<div class="cg__iconbox-descWrapper">
<p class="cg__iconbox-desc"> [...] </p>
</div><!--/.cg__iconbox-descWrapper-->
</div><!--/.cg__iconbox-contentWrappe-->
</div><!--/.cg__iconBox-inner-->
</div><!--/.cg__iconBox-->
cg__iconbox-iconLeft
class added aftercg__iconbox-iconWrapper
allow you to move the icon to the left.cg__iconBox--circle
class added aftercg__iconBox
transform your icon into a circle.cg__icon-clock
class added aftercg__iconbox-icon
establishes the iconbox icon.- All the iconbox tipes and classes can be found in
app/css/icomoon.css
You can add new icons or customize the current ones with the IcoMoon App: https://icomoon.io/app/
Icon box style can be changed by adding a new class after cg__iconBox named cg__iconBox–style preceded by the number of the style. These can be found in css/scss/_iconBox.
Here are some examples of these styles: