InlineMessage
An inline message displays a prominent message and optionally a related action.
How to use
Section titled “How to use”Used for critical error messages, notices and local campaigns.
Showing: Inline message in neutral color with title and underlined link.
Anatomy
Section titled “Anatomy”
Showing: Inline message in neutral color with title, description and underlined link.
Variants
Section titled “Variants”Vertical
Section titled “Vertical”Vertical message are used when more text is needed.
Horizontal
Section titled “Horizontal”Horizontal variant on wider areas such as full page width.
Horizontal Inline Message will only remain horizontal as long as the content fits on a single line inside the container or viewport size. If it doesn’t, the content will wrap like in a Vertical Inline Message.
Neutral
Section titled “Neutral”Inline message with neutral color is used for informational messages. Use neutral color for less emphasis and can be used on color backgrounds.
Positive
Section titled “Positive”Inline message with positive color is used for informational messages. Should not be used on color backgrounds.
Caution
Section titled “Caution”Inline message with caution color is used for negative messages. Should not be used on color backgrounds.
Destructive
Section titled “Destructive”Inline message with destructive color is used for critical error messages. Should not be used on color backgrounds.
Colour modes
Section titled “Colour modes”
Neutral colour on light mode
Positive colour on light mode
Caution colour on light mode
Destructive colour on light mode
Neutral colour on dark mode
Positive colour on dark mode
Caution colour on dark mode
Destructive colour on dark mode
Char limit
Section titled “Char limit”Horizontal
Section titled “Horizontal”Title: Up to 1 lines of text
Description: Up to 1 lines of text
Underlined link: 25 char
Vertical
Section titled “Vertical”Title: Up to 2 lines of text
Description: Up to 3 lines of text
Underlined link: 25 char
Examples
Section titled “Examples”
Example: Inline message with neutral message.
Example: Inline message with positive message.
Example: Inline message with a cautionary warning message.
Example: In-line message with a cautionary warning message.
Example: Inline message with critical error message.
Considerations
Section titled “Considerations”Longer messages
Section titled “Longer messages”Longer Inline messages (with description) are recommended to be placed below a hero.
Shorter messages
Section titled “Shorter messages”Shorter Inline messages (without description) is recommended to be placed above hero. But can be placed below.
