Email Kit
Elements

Divider

Dividers are used to separate elements.

Paul Sylling
by Paul Sylling Follow
Updated January 11, 2020

Test Results

Passing

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

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

Usage

Dividers help organize content into related sections. They are generally used to separate a primary hero section with secondary content or within a list of similar elements.

Example

Copy the code below and paste it into a table within the .panel-body to create a divider in your email.

Horizontal Divider

Use the code below to create a horizontal divider.

Horizontal Divider
Dividers look visually like a horizontal rule and are implemented using a table row.

Best Practices

Follow these best practices when using dividers.

  • Attempt to separate content with white space first before using a divider.
  • Use a light color that is visually noticeable but blends with the overall aesthetics.

Frequently Asked Questions

Answers to common questions about dividers in Email Kit.

Should I separate content with white space or a divider?

Using too many dividers can create visual noise. To achieve a clean and modern design, either use dividers sparingly or opt for white space to separate content.

Can’t I just use an hr tag to create a divider?

Email Kit uses a table row with a border applied in order to achieve better consistency across clients and more styling options.