Navigation Tiles
The Navigation tiles are a set of navigation links than can be used in the page content.
Usage
Place the Navigation tiles on a page as a single tile or as a group, contained within a bootstrap grid system.
Each tile supports the use of any of the Standard Life Icons.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-tile--primary |
Primary navigation tile with a white background and pale blue border. |
slb-tile--secondary |
Secondary navigation tile with a pale blue background. |
slb-tile--micro |
Micro navigation tile with a white background, alternative grey border and text centered. |
slb-tile--account |
Account navigation tile with a white background, pale blue border and an overlapping blue background. |
.slb-tile--primary - Primary tile notification.
.slb-tile--secondary - Secondary tile notification.
.slb-tile--micro - Micro tile notification.
.slb-tile--account - Account tile notification.
tiles\tile.hbs
<a href="#" class="slb-tile [modifier class]">
<svg class="slb-tile__icon" viewBox="0 0 512 512" id="chart-area-[modifier class]"><title>chart-area</title><path d="M500 384c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v308h436zM372.7 159.5L288 216l-85.3-113.7c-5.1-6.8-15.5-6.3-19.9 1L96 248v104h384l-89.9-187.8c-3.2-6.5-11.4-8.7-17.4-4.7z"/></svg>
<h3 class="slb-tile__heading">Tile Heading</h3>
<p class="slb-tile__bodytext">Tile subtext paragraph applied here</p>
</a>
Source:
components/_tiles.scss