Mockup notification
A decorative push notification for the brochure mock-ups: app icon, title, time and a one-line message.
On its own
Without at a notification is simply shown, so it works as a small picture inside a
feature card. The child content is the message. It is aria-hidden, since it is a picture
of the product rather than a real alert, and it always sits level, the way a phone draws one.
App icon
icon sets the glyph on the app tile and defaults to Bell. avatar
replaces the tile with an image, such as the Koala mark on the Legal home phone. Pass it a resolved URL.
In a sequence
Inside a sequenced koala-mockup, at slides the notification in at that step
and until slides it away again; leave until off to keep it until the loop
restarts. Here the four updates from the case window of the Tech home share one grid cell, so each
one slides in over the last as it leaves, the way a phone replaces a banner. A hidden notification
still holds its space, so the stack keeps its height while it plays. Under reduced motion the loop
jumps to the end and only the last notification shows.
Over a phone
To drop a notification over the screen of a phone mockup,
place it inside the frame and position it with the caller's own classes, as the Legal home does with
absolute inset-x-2 top-2 z-10. Here it drops in once the searches tick.
API
textIconName on the app tile (default Bell)Tone of the app tile (default Primary); anything else sets the icon in that tone on a light tileresolved image URL, shown instead of iconresolved URL of a person's photo, cropped round, shown instead of icontext (default now)step number; unset shows it from the startstep number; unset keeps it until the loop restartsmerged onto the notification, e.g. absolute inset-x-2 top-2 z-10