Icon boxes

Icon boxes can be a quick and easy way to display information in a visual manner. Ensemble ships with 2 types of Icon box, standard and left aligned icons.

The standard icon box can be bordered, or plain, to remove the border, remove the icon-box--bordered class from your icon box code.

<div class="icon-box padding-top-20 margin-top-100 icon-box--bordered">
	<div class="icon-box__icons background-color-10">
		<i class="icon-box__icon fa fa-camera"></i>
	</div>
	<div class="icon-box__content">
		<p>
			Content here
		</p>
	</div>
</div>

Colored icons

Adding color to your icons is as simple as adding a text-color- class to your icon.

Here we have added a color from our text color classes to each icon.

<div class="icon-box padding-top-20 margin-top-100 icon-box--bordered">
	<div class="icon-box__icons background-color-10">
		<i class="icon-box__icon text-color-3 fa fa-camera"></i>
	</div>
	<div class="icon-box__content">
		<p>
			Content here
		</p>
	</div>
</div>

Left aligned Icons

Ensemble also has an alternate icon box design with the Icon sitting on the left side of the content.

Again, left aligned icons can have their own colors, using the text-color- class.

<div class="icon-box">
	<div class="icon-box__icons background-color-10 icon-box__icons--icons-left">
		<i class="icon-box__icon fa fa-camera"></i>
	</div>
	<div class="icon-box__content icon-box__content--text-right">
		<p>
			Content here
		</p>
	</div>
</div>