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 after cg__iconbox-iconWrapper allow you to move the icon to the left.
  • cg__iconBox--circle class added after cg__iconBox transform your icon into a circle.
  • cg__icon-clock class added after cg__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:

  • cg__iconBox–style1#

  • cg__iconBox–style2#

  • cg__iconBox–style3#

  • cg__iconBox–style4#