The tile component (also known as a card) can be used to create a navigation list (eg. news/blog articles) or a series of featured items.
Example markup
<div class="col-12 col-sm-6 col-lg-3">
<div class="scc-tile scc-tile--pos-1">
<div class="scc-tile__content">
<a class="scc-tile__link" href="#">
<span class="scc-tile__picture">
<img alt="" class="scc-tile__img" loading="lazy" src="image.png" />
</span>
<span class="scc-tile__title">Title</span>
</a>
<p class="scc-tile__strapline">
Content here...
</p>
</div>
</div>
</div>As you can see from the markup above, each tile is placed in a Bootstrap column to enable more than one item to be aligned horizontally, as permitted by the screen width of the device.
In most cases, the Boostrap column class should contain col-12 col-sm-6 and either col-lg-3 or col-lg-4.
Example output
All Bootstrap columns should be placed into a Bootstrap row, as is the case in the demonstration below.
