This is how the basic icon box markup looks like:

<div class="hg-iconbox hg-iconbox--style2 hg-text--center">
  <a href="#" class="hg-iconbox__anchor">
    <div class="hg-iconbox__iconWrapper">
      <span class="hg-iconbox__icon hg-icon-ambulance"></span>
    </div><!--/.hg-iconbox__iconWrapper-->
    <div class="hg-iconbox__contentWrapper">
      <div class="hg-iconbox__titleWrapper">
        <h3 class="hg-iconbox__title">[...]</h3>
      </div><!--/.hg-iconbox__titleWrapper-->
      <div class="hg-iconbox__descWrapper">
        <p class="hg-iconbox__desc">[...]</p>
      </div><!--/.hg-iconbox__descWrapper-->
    </div><!--/.hg-iconbox__contentWrapper-->
  </a><!--/.hg-iconbox__anchor-->
</div>

Icon box styles can be found in app/css/scss/_iconBox.scss which follow the structure:

.hg-iconbox {
  &:hover {
//modifiers
  @include md('style2') {...}
  @include md('style1') {...}
  @include md('l20') {...}
  @include md('tab') {...}
  @include md('center') {...}
  ...
//elements
  @include el('icon') {...}
  @include el('iconWrapper') {...}
  ...
}

• All the icon box types and classes can be found in app/css/icomoon.css

Icon box style can be changed by adding a new class after hg-iconBox named hg-iconBox–style preceded by the number of the style.

Here are some examples of these styles:

• hg-iconBox–style1

• hg-iconBox–style2

• hg-iconBox–style3

• hg-iconBox–style4

• hg-iconBox–style5

• hg-iconBox–style6