# Notifications

Tells the reader about events they did not cause: cards that arrive at the top right while they work, and the notification center under the bell that keeps every notification.

* Kind: component
* Page: https://design.werklist.com/components/notifications
* Version: 2.1.2

## When to use it

* Someone mentions the reader, assigns them work or writes to them
* A candidate applies or a company lead arrives
* A message arrives in an inbox that is not on screen

## When not to use it

* The item is already on screen: it appears in its list
* The result of the reader's own action: Toast
* A condition of the current page: Inline message
* Marketing or announcements

## Anatomy

* center: 404 px wide, on a phone the screen less 24 px; corner radius 24 px; raised glass, opaque on a phone (--radius-3xl, --glass-fill-raised, --elevation-3)
* title: Title 3, 17 px, bold, with Mark all as read at the end in blue text (--type-product-title-3, --brand-blue)
* lane filter: round gray chips, each with its unread count; the current lane in full ink at weight 700 (--glass-fill-hover, --radius-full)
* tabs: All and Unread, Dense, 13 px, medium; the current tab in full ink at weight 700 with a 2 px underline (--type-product-dense, --text, --text-muted)
* day heading: Today, Yesterday, Earlier; bold, in muted ink (--text-muted)
* list: 460 px high on a desktop, then it scrolls
* row: corner radius 16 px; padding 10 px by 12 px; a 32 px avatar; name Dense, 13 px, bold; the sentence regular, with the verb in muted ink; time and lane Caption small, 11 px, tabular digits (--radius-2xl, --type-product-dense, --type-product-caption-small)
* unread: a 6 px dot and --brand-blue at 6 percent on the row (--brand-blue)
* urgent: the word Urgent after the name, bold, on the solid alert fill, corner radius 6 px (--badge-alert, --badge-alert-ink)
* row dismiss: 28 px quiet icon button at the end of the row, shown on hover and focus; 44 px and always shown on touch
* card stack: top right, 72 px from the top of the window; 376 px wide, or the screen less 24 px; 8 px between cards; scrolls before a card would be cut in half (--space-2)
* card: thin frosted glass with a bright rim; corner radius 28 px; padding 14 px, 40 px at the end for Dismiss; rises 1 px on hover
* card lines: first the kind of event (Caption small, 11 px, on its color at 15 percent, fully round), the name (Dense, 13 px, bold) and the time (Caption small, 11 px); then what arrived; then an optional detail in muted ink (--type-product-caption-small, --type-product-dense)

## Variants

* notification center: the history and the live feed, opened from the bell
* card: an arrival while the reader works

## States

* center opening: moves 8 px down into place as it fades in, over 160 ms (--ease-standard)
* row unread: 6 px dot and --brand-blue at 6 percent on the row (--brand-blue)
* row read: no dot, no fill
* row dismissed: listed under All only; name in --text-muted at weight 500
* row hover or focus: a faint fill (--glass-fill-hover)
* loading: four skeleton rows
* empty: 'Nothing unread' under Unread, 'You are all caught up' under All, and one line on what arrives here
* failed: 'Your notifications did not load.' with Try again, in place of the list
* partly failed: a warning band above the rows that loaded: 'Some notifications did not load.' with Try again (--warning-ink)
* reduced motion: fades only

## Keyboard

* Enter or Space on the bell: opens the center; focus moves to the current lane
* Left and Right: move between lanes, or between All and Unread, and select
* Home and End: first and last lane or tab
* Tab: lanes, tabs, then each row followed by its dismiss button
* Enter on a row or card: opens the item and marks it read
* Escape: closes the center and returns focus to the bell

## Accessibility

* the bell's name carries the count ('Notifications, 3 unread'); the number drawn on it is hidden from screen readers
* the center is a named dialog; the lane filter and the tabs are tab lists
* a card is announced once, politely, and takes no focus
* unread is shown by the dot and named in the row's accessible name; the fill is a second cue
* targets 44 px on touch

## Content

* a row reads as a sentence: person, verb, item ('Ana Horvat assigned you to Welders for Split')
* the filter has five lanes: Email, Work, Companies, Candidates and Chat
* a card names the kind of event instead, in its color: Email in blue, Candidate lead in green, a message that did not send in red
* no private detail beyond what the item shows
* one notification per event; a later event on the same item updates it
* a card carries no icon

## Tokens

* --glass-fill-raised
* --type-product-title-3
* --type-product-dense
* --type-product-caption-small
* --surface-1
* --elevation-3
* --radius-3xl
* --radius-2xl
* --radius-full
* --space-2
* --text
* --text-muted
* --brand-blue
* --warning-ink
* --badge-alert
* --badge-alert-ink
* --glass-fill-hover
* --ease-standard
* --focus-ring