Skip to main content

Messages

Messages provide the user with contextual static information. They have a lower priority than a notification or prompt.

Specifications

State Example Height Use case
Small

Example of a small message

48px Cards
Medium

Example of a small message

56px Wizard
Large

Example of a small message

64px Top of Page

Note: In-cab size only. See mobile patterns (coming soon) for smaller options if required.

Behaviors

  • Fills the width of its container.
  • Should have an accompanying icon to the left of the message text, unless gray.
  • When the text spans multiple lines, the icon should remain aligned to the top.

Messages Behavior Example 1

Messages Behavior Example 2

Editorial

  • Messages should be brief, written in full sentences, with proper punctuation.
  • They should provide the user with helpful, contextual information about a possible action or a set of data.
View on GitHub