Email Kit
Elements

Background

Backgrounds are used to shade or highlight a content area.

Paul Sylling
by Paul Sylling Follow
Updated January 11, 2020

Test Results

Passing

Want proof? View the test results to see how a background element renders across each of the most common email clients.

Email Kit is rigorously tested on the most common email clients.

Usage

Backgrounds help call attention to important content in your email. They are also used as the foundational element when creating an alert component. Backgrounds can be placed either inside or outside of the .panel-body.

Example

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

Primary Color Background

Use the code below to create a primary color background.

Background Text
The background color can be changed using bg-* modifier classes.

Best Practices

Follow these best practices when using backgrounds.

  • Use backgrounds to call attention to important information.
  • 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 backgrounds in Email Kit.

How do I add top and bottom spacing to my content inside a background?

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