Notice

A short message in the flow of the page: you’re offline, something updated, something went wrong. A hairline box with a 2px tone edge on the left, and no colored fill.

CSS: css/components/notice.css

01 — Variants

Info

The default tone, for neutral news. Actions sit on the right and wrap below on narrow screens.

You’re offline. Showing what’s saved on this phone.

Showing published photos only. Connect GitHub to see your private library too.

Accent

Updates about the page itself, such as a new version.

Photostream has been updated.

Status

Success, warning and info use the traffic light colors, for news about the state of a system.

Cluster healthy

All 18 pods are running.

Rolling update

3 of 6 replicas are on the new version.

Syncing

Fetching the latest state from prod-east.

Error

Something failed. Give it a title, say what to do, and offer a way to try again.

Couldn’t load your photos

The server didn’t answer. Check your connection and try again.

02 — Usage

Use it for

Messages about the page or the person’s data.
A form’s overall error and success (.form__error and .form__status get the same look).

Avoid

Colored backgrounds or icons. The 2px edge carries the tone.
A single field’s error. Put it under the field.
Marketing messages.

03 — Accessibility

Notes

role="alert" for an error caused by something the person did; role="status" for background news. A notice there when the page loads needs no role.
To dismiss one, set hidden and move focus somewhere sensible.