Email Kit


Alerts are used to communicate an important message.

Paul Sylling

Test Results


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

Email Kit is rigorously tested on 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.

Danger Alert

Use the code below to create a danger alert.

Danger Alert
The background color can be changed using bg-* modifier classes.

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.

What is the best color for an alert?

Email Kit has built-in colors for success, danger, warning and info states.

Where is the best place to put an alert in my email?

Warnings, errors and other critical alerts should be placed near the top of the email.

How do I add top and bottom spacing to my content inside an alert?

Inside of the alert, add .spacer-* rows around your content to create vertical spacing.