Divider

A Divider is basically a thin horizontal line that separates content areas.

Similar to Spacers, Dividers provide consistent vertical spacing while also offering visual separation of your content.

To create a Divider, we can use a regular <hr> element:

src/templates/example.html

<hr class="border-0 bg-slate-500 text-gray-500 h-px">

How it works

We first reset the border-width, so we can apply our own colors
We use a combination of background-color and color - the latter is for Outlook (Windows)
Removing the border means the element now has no height, so we use h-px to set it to 1px

The <hr> Divider is based on Mark Robbins' excellent work, available at goodemailcode.com.

Customization

You can customize the divider and give it a custom width or height, change its color, the top/bottom space around it, and even its alignment.

Width

An <hr> goes full width by default, but we can set a custom width.

While we're at it, let's also use max-w-full, to make it responsive.

src/templates/example.html

<hr class="border-0 bg-slate-500 text-slate-500 h-px w-[400px] max-w-full">

Need a custom width for mobile devices? Use the sm breakpoint:

src/templates/example.html

<hr class="border-0 bg-slate-500 text-slate-500 h-px sm:w-16 max-w-full">

Margin

You may customize top and bottom spacing with CSS margins.

For example, let's add 32px to the top and bottom:

src/templates/example.html

<hr class="border-0 bg-slate-500 text-slate-500 h-px my-8">

Need uneven spacing?

src/templates/example.html

<hr class="border-0 bg-slate-500 text-slate-500 h-px mt-4 mb-8">

Note that


<hr>

elements come with margins by default, so you might want to set a custom one or reset it with

m-0

. For example, Chrome resets to

8px

Alignment

You can use the align attribute to align a Divider.

src/templates/example.html

<hr align="right" class="border-0 bg-slate-500 text-slate-500 h-px mt-4 mb-8">

By default, it will be centered.

Vertical

For a vertical Divider, simply use a narrow width and a bigger height:

src/templates/example.html

<hr class="border-0 bg-slate-500 text-slate-500 w-px h-16 m-0">

Table divider

The spacing above and below the Table Divider line is defined through the vertical padding of the inner <td> element, with Tailwind CSS utilities:

src/templates/example.html

<table class="w-full" role="separator">
  <tr>
    <td class="py-6">
      <div class="bg-slate-300 h-px leading-px">&zwj;</div>
    </td>
  </tr>
</table>

How it works:

py-6 adds 24px top and bottom padding
the <div> is the horizontal line: we set its height and line-height to 1px, and give it a background color
we use a &zwj; to add something inside the <div>, so it can take up height

Feel free to use   instead of &zwj; - both work just fine 👌

Outlook note

The <div> element where we use leading-px needs some extra attention for Outlook. Otherwise, it will render thicker than intended.

To make Outlook respect the line height you set on elements, you may use the mso-line-height-rule-exactly class that is available from the tailwindcss-mso plugin (included in the Starter).

src/templates/example.html

<table class="w-full" role="separator">
  <tr>
    <td class="py-6">
      <div class="bg-slate-300 h-px leading-px mso-line-height-rule-exactly">&zwj;</div>
    </td>
  </tr>
</table>