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

  1. We first reset the border-width, so we can apply our own colors
  2. We use a combination of background-color and color - the latter is for Outlook (Windows)
  3. 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">

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">
  <tr>
    <td class="py-6">
      <div class="bg-slate-300 h-px leading-px">&zwnj;</div>
    </td>
  </tr>
</table>

How it works:

  • py-24 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 &zwnj; to add something inside the <div>, so it can take up height

Feel free to use &nbsp; instead of &zwnj;, 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-leading-exactly class that is available from the tailwindcss-mso plugin (included in the Starter).

src/templates/example.html
<table class="w-full">
  <tr>
    <td class="py-6">
      <div class="bg-slate-300 h-px leading-px mso-leading-exactly">&zwnj;</div>
    </td>
  </tr>
</table>

Copyright © 2022 Maizzle Edit this page on GitHub