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 class="cg__iconbox-contentWrapper">
      <div class="cg__iconbox-titleWrapper">
        <h3 class="cg__iconbox-title">[...]</h3>
      <div class="cg__iconbox-descWrapper">
        <p class="cg__iconbox-desc"> [...] </p>
  • 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:

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#