Skip to main content


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


State Example Height Use case

Example of a small message

48px Cards

Example of a small message

56px Wizard

Example of a small message

64px Top of Page

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


  • 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


  • 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.