Message

The Message component is used to display important notifications and alerts to users. It communicates status, urgency, and context through clear visual styling such as colour and iconography.

How to create a Message

1. Log in as a Content author.

2. Create a new Page or navigate to the page you want to add the Message to.

3. Click on the Components dropdown and select Message.

4. Open the Type dropdown to select the type of Message you want to display:

   1. Information

   2. Error

   3. Success

   4. Warning

5. Add an optional Title. This will display next to the icon at the top of the message.

6. Add optional Content.

7. Select Light or Dark theme.

8. Set the Vertical spacing.

9. Note: the Background is not enabled for the Message.

Message examples

The colours below are examples using CivicTheme OOTB colour settings.

Further Message resources

Storybook

Interact with the Message component in Storybook.

UX evidence framework

Read the UX evidence behind the Message component.