How to use icon box

This is how the basic icon box markup looks like:

<div class="hg-iconbox">
  <div class="hg-iconbox__icon-wrapper">
   <span class="hg-iconbox__icon icon-travel-56"></span>
  </div>
  <div class="hg-iconbox__content-wrapper">
   <div class="hg-iconbox__wrapper hg-iconbox__title-wrapper">
    <h3>
     <a href="#">MAYFAIR HOTEL & SPA</a>
    </h3>
   </div>
  <div class="hg-iconbox__wrapper hg-iconbox__desc-wrapper">
   <p class="hg-iconbox__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </p>
  </div>
 </div>
</div>
  • All the icon box types and classes can be found in app/style/scss/elements/_iconBox.scss
  • All the icons used for icon boxes are found in app/fonts/fontello

You can add new icons or customize the current ones with the IcoMoon App: https://icomoon.io/app/

The icon box styles used on the website are the following:

  1. icon aligned left

<div class="hg-iconbox">

2. icon aligned center

<div class="hg-iconbox--center-icon txt-center ">

3.Small icons

<div class="hg-iconbox hg-iconbox--small">