Alerts Block
Advanced Training Module 2: Advanced Design Blocks
The Alerts block is used to highlight important information and ensure visitors don’t miss critical messages. Alerts are visually distinct from the surrounding content, making them ideal for notifications, warnings, updates, and announcements.
Unlike a standard paragraph or callout, alerts use colour and icons to communicate different types of information at a glance.
Common uses include:
- Application deadlines
- Service interruptions
- Policy updates
- Important reminders
- Confirmation messages
- Temporary notices
When to Use an Alert
Use an Alert block when information requires immediate attention from visitors.
Examples include:
Important Notice
Changes to website access procedures take effect on September 1.
Service Interruption
Website maintenance is scheduled for Sunday from 8:00 AM to 12:00 PM.
Application Deadline
Applications for the Winter term close on October 15.
Alert blocks should be reserved for information that is genuinely important. If everything is highlighted, nothing stands out.
Alert Types
The Alerts block includes several styles, each with a different purpose. Choose the alert type that best matches the urgency and purpose of the message.
Success
Use when confirming a positive outcome or completed action.
Examples:
- Registration successfully submitted
- Application received
- Account activated
Information
Use for general information and helpful guidance.
Examples:
- Service updates
- Helpful tips
- Additional information
Warning
Use when visitors should exercise caution or take notice.
Examples:
- Upcoming deadline
- Scheduled maintenance
- Important policy changes
Error
Use when something requires immediate attention or action.
Examples:
- Service outage
- Missing information
- Critical issue affecting users
Adding an Alert Block
To add an Alert block:
- Click the + button and search for Alert.
- Select the Alert block.
- Choose an alert type.
- Add a title.
- Add supporting content.
The block will automatically apply the appropriate styling and icon.
Writing Effective Alerts
A good alert should answer three questions:
- What happened?
- Why does it matter?
- What should the visitor do?
Example
Scheduled Maintenance
The website will be unavailable on Sunday from 8:00 AM to 12:00 PM due to system maintenance.
Learn More
This approach helps visitors quickly understand the message and any required action.
Adding Links
Alerts can contain hyperlinks when additional information is required.
Examples:
- Read the full announcement
- View service updates
- Review application requirements
If visitors need to complete a task, ensure the next step is clearly linked.
Best Practices
Match the Alert Type to the Message
- Info for general information
- Success for positive outcomes
- Warning for cautionary notices
- Error for urgent problems
Keep Alerts Short
Visitors should be able to understand the message quickly.
Focus on One Message
Each alert should communicate a single idea or action.
Use Alerts Sparingly
Overusing alerts reduces their effectiveness and can overwhelm visitors.
Remove Expired Alerts
Review alerts regularly and remove messages that are no longer relevant.
Common Uses
Alerts are frequently used for:
- Registration deadlines
- Upcoming events
- Service interruptions
- Temporary notices
- Important updates
- Emergency communications
-
Welcome to CUTheme Mastery Training, Module 2. In this video, we will cover alerts.
Alerts are used for important messages on your site that you want users to see. They stand out from the background, and draw the user’s attention.
To add an alert, upon up the block selection menu, and under “Design”, select “Alerts”.
There are 4 different types of alerts. You have a success, an error, a warning, and an info alert. You can choose which type fits best for your application. You can then add a header to your alert, and some body text to add more information. For the body text, you can bold, italicize, and add a link if you want.
Try it Out
- Add an Information Alert to a page.
- Add a title and description.
- Include a link to additional information.
- Change the alert to a Warning alert.
- Change it again to an Error alert.
- Preview the page and compare the different styles.