Alerts are used to communicate an important message.
Want proof? View the test results to see how an alert component renders across each of the most common email clients.
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.
Alerts utilize Email Kit's built-in background color classes to create the four common variations.
Used to confirm that an action or status has been accepted.
Used to advise the reader that their attention is required to address a critical issue.
Used to caution the reader that their attention may be required to address an issue.
Used to provide additional information to the reader.
Copy the code below and paste it either inside or outside of the .panel-body to create an alert in your email.
Use the code below to create a danger alert.The background color can be changed using bg-* modifier classes.
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.
Email Kit has built-in colors for success, danger, warning and info states.
Warnings, errors and other critical alerts should be placed near the top of the email.
Inside of the alert, add .spacer-* rows around your content to create vertical spacing.