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