Best Practices

Using Color-coded Callouts to Guide Your Users

| By

The Callout module gives visual emphasis to important text by using a variety of colors to communicate distinct messages.

Blue - General

General callouts can be used for tips, reminders, or low-priority information. The blue color coding lets the user know this is a general message.

Blue - general callout

Gold - Informative

Informative callouts can be used for recent announcements, changes or medium-priority information. The gold color coding lets the user know this is important but not urgent.

Gold - informative callout

Green - Confirmation/Success

Confirmation or success callouts can be used after an action has been completed. The green color coding lets the user know this is a confirmation message

Green - confirmation callout

Orange - Warning

Warning callouts can be used to call attention to approaching deadlines, upcoming changes, or medium-priority information or lesser cautionary guidance. The orange color coding lets the user know this is important, but no immediate action is required.

Orange - warning callout

Red - Critically Important

Critically important callouts can be used for cautionary guidance, urgent alerts, or high-priority information. The red color coding lets the user know this critically important.

Red - critically important callout