Corner Notification
The corner notification is label diagonally placed to the right.
Usage
Place the tile notification inside a navigation tile for it to display at the top left.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-notify-bar |
Default notification bar. |
slb-notify-bar--purple |
Purple notification bar. |
slb-notify-bar--red |
Red notification bar. |
.slb-notify-bar - Default notification modifier.
.slb-notify-bar--red - Red notification modifier.
.slb-notify-bar--purple - Purple notification modifier.
tile-notification\notification-corner.hbs
<a href="#" class="slb-tile slb-tile--secondary">
<!-- notification -->
<div class="slb-notify-bar [modifier class]">
<span class="slb-notify-bar__text">new</span>
<span class="[modifier class] slb-notify-bar__right"> </span>
<span class="[modifier class] slb-notify-bar__left"> </span>
</div>
<!-- end -->
<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/_tile-notification.scss