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 inapp/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:
- 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">