Messages

Usage

A more verbose version of the banner component. Mainly used for feature announcments, empty states or marketing messages.

With image

A spot illustration provides a cue about the type of message and sets a visual anchor when scanning a page.

The image is positioned in the vertical or horizontal center of its parent. For spacing between text and container, the inner padding of the parent container is used.

Without image

For low-key messages, the illustration can be left out.