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: