Circle Notification
The circle notification is circular with a number in the middle.
Usage
Place the tile notification inside a navigation tile for it to display at the top left.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-notify-circle |
Default notification circle. |
slb-notify-circle--purple |
Purple notification circle. |
slb-notify-circle--red |
Red notification circle. |
slb-notify-circle--sm |
Small notification circle, used for secure header notifications. |
.slb-notify-circle - Default notification modifier.
.slb-notify-circle--red - Red notification modifier.
.slb-notify-circle--purple - Purple notification modifier.
tile-notification\notification-circle.hbs
<a href="#" class="slb-tile slb-tile--secondary">
<!-- notification -->
<span class="slb-notify-circle [modifier class]">
<span class="slb-notify-circle--text">1</span>
</span>
<!-- 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