Test Results

Want proof? View the test results to see how an alert component renders across each of the most common email clients.

Usage

Use an alert when you want notify the reader about important information. A well-written alert is concise and should tell the reader what they need to do next if action is required.

Variations

Alerts utilize Email Kit's built-in background color classes to create the four common variations.

Success

Used to confirm that an action or status has been accepted.

Danger

Used to advise the reader that their attention is required to address a critical issue.

Warning

Used to caution the reader that their attention may be required to address an issue.

Info

Used to provide additional information to the reader.

Example

Copy the code below and paste it either inside or outside of the .panel-body to create an alert in your email.

Danger Alert

Use the code below to create a danger alert.

Best Practices

Follow these best practices when using alerts.

• Alert components should fill the entire width of the email.
• Use the proper background color that represents the alert type (success, danger, warning, info).
• Consider also using an icon that represents your alert for color blind readers.
• When using a background color, ensure the foreground and background colors pass the minimum level of WCAG accessibility.

Frequently Asked Questions

Answers to common questions about alerts in Email Kit.