Tags

Tags are a great way to group categories for quick access. and are often used in blog themes. Ensemble uses the list utility class, together with the list__item--inline-block class to create the basic tag cloud, styles are then set on each tag using the tag-item class.

• Style
• Style
• Elegant
• Panache
• Fresh
• Design
• Hot
• Fit
• Cream
• Modern
• Splash
• Responsive
• Flat
• Media
• New
• Grand
• Luxury
• Device
• CMS
• Fast
• Team

The tags block mainly consists of the list utility class, displaying its li elements as inline-block, through the list__item--inline-block class. Tag styling is done through the tag-item class on the tags anchor.

<ul class="list">
	<li class="list__item--inline-block"><a class="tag-item" href="#">Style</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Style</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Elegant</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Panache</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Fresh</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Design</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Hot</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Fit</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Cream</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Modern</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Splash</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Responsive</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Flat</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Media</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">New</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Grand</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Luxury</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Device</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">CMS</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Fast</a></li>
	<li class="list__item--inline-block"><a class="tag-item" href="#">Team</a></li>
</ul>