Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to sidebar Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Content
  2. Notification

Notification

Also known as: banner or alert

The notification component creates a colorful banner that can be used to visually distinguish urgent content or highlight responses to user actions.

Examples

🐏
Alert

May I have your attention, please?

Thanks

We've successfully received your response!

Code reference

When to use

Use the notification component when you want to draw users attention to urgent or high-priority information as soon as they land on your website or specific webpage. It also can be used for confirmation of user actions, such as a successful form submission.

It is important to consider whether your content warrants the use of a notification banner, or if the callout component is sufficient for a specific use case. The callout component also draws user attention to specific content, though more subtly, and is ideal for calls-to-action or important content such as contact information.

How to use

Tips

Requirements

The notification component must have a name, a theme and body content.

Accessibility considerations

It’s important to keep web accessibility standards in mind while creating notification content. This includes creating accessible links with contextual titles and using appropriate heading structures to ensure maximum readability for screen readers.

Quick links

🐏
Sidebar Example

Notifications can also be shown in the sidebar.

View graphic version