How to use icon box

This is how the basic icon box markup looks like:

   <div class="dm__iconbox dm__text--center">
      <span class="dm__iconbox-icon dm__serviceIconbox-icon dm__iconbox--circle dm__bg--cyan dm__text--white icon-dm-service_03"></span>
      <div class="dm__iconbox-content"> 
        <div class="dm__iconbox-title--wrapper">
          <h3 class="dm__iconbox-title dm__text--center">Iconbox title;/h3> </div><!--/.dm__iconbox-title-wrapper -->
          <div class="dm__iconbox-text--wrapper">
            <div class="dm__iconbox-text"> 
              <p>Iconbox text;/p>
            </div><!--dm__iconbox-text --> 
          </div><!--/.dm__iconbox-text-wrapper -->
        </div><!--/.dm__iconbox-content -->
      </div><!--/.dm__iconbox --> 

In the code above, the “icon-dm-service_03” represents the icon class, “dm__iconbox--circle” is used to put your icon into a circle , dm__bg--cyan which is the icon color and the “dm__serviceIconbox-icon” which refer to the section class.

The general icon box style can be found in app/css/scss/_general.scss

Icon boxes are different by size, padding, animations and many other properties depending on the section in which they are located.

For example in app/css/scss/_homepage.scss you can find at “feature section” more specific icon box styles: