# notification

The markup of every demo on <https://kuiper.oeds.it/notification/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: `notification-message-*` over 14 color roles.

Shown 3 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-black"><p class="text-truncate">black</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message"><p class="text-truncate">base</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-muted"><p class="text-truncate">muted</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-white"><p class="text-truncate">white</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-primary"><p class="text-truncate">primary</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-secondary"><p class="text-truncate">secondary</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-tertiary"><p class="text-truncate">tertiary</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-danger"><p class="text-truncate">danger</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-warning"><p class="text-truncate">warning</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-accent"><p class="text-truncate">accent</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-success"><p class="text-truncate">success</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-info"><p class="text-truncate">info</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-action"><p class="text-truncate">action</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-urgent"><p class="text-truncate">urgent</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-emphasis"><p class="text-truncate">emphasis</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><div class="notification-message notification-message-emphasis disabled"><p class="text-truncate">disabled</p></div></div></div>
</div>
```