Spacing

Vocabulary

Spacing, Padding, White Space

Syntax

Spacing is crucial for displaying content in an organized, breathable manner.

Semantics

Use spacing to inform the hierarchy of content. Information that's related to each other should be closer together; disparate information should be further apart. Spacing should be consistent so the email flows in a digestible, predictable manner.

Guidelines

Adding space to an email is somewhat similar to using Leap. The naming scheme is similar, but there's an esg prefix and there aren't any sizes. Also, the spacing is defined in pixels instead of rem. Email clients use different baselines for rem, which results in an inconsistent handling of spacing across clients. Pixels are rendered the same across the board - hooray! The range is in 5 pixel increments, from 0 - 25 pixels.

Uniform Spacing

These classes are used to apply equal spacing around the entire element.

Margin

  • .esg-m-0
  • .esg-m-1
  • .esg-m-2
  • .esg-m-3
  • .esg-m-4
  • .esg-m-5

Padding

  • .esg-p-0
  • .esg-p-1
  • .esg-p-2
  • .esg-p-3
  • .esg-p-4
  • .esg-p-5

Individual Spacing

These classes are used to apply spacing to a particular side of an element.

Margin

  • .esg-m-t-1 margin-top
  • .esg-m-b-1 margin-bottom
  • .esg-m-l-1 margin-left
  • .esg-m-r-1 margin-right
  • .esg-m-lr-1 margin left + right
  • .esg-m-tb-1 margin top + bottom
  • .esg-m-auto horizontal center

Padding

  • .esg-p-t-0 padding-top
  • .esg-p-b-5 padding-bottom
  • .esg-p-l-1 padding-left
  • .esg-p-r-2 padding-right
  • .esg-p-lr-3 padding left + right
  • .esg-p-tb-4 padding top + bottom
esg-m-05
esg-m-1
esg-m-2
esg-m-3
esg-p-05
esg-p-1
esg-p-2
esg-p-3
Vocabulary

HR, Horizontal Rule, Horizontal Lined

Syntax

The horizontal rule is a light grey line that spans the width of the email, inside of the padded area. It's formed by applying border to a TD element. This gives us more control over the styling than using the HR element, which would take a lot of code to override for various client HR styling.

Semantics

It's a divider that segments content horizontally. It gives disparate sections space to communicate separate thoughts.

HTML

<table>
  <tr>
    <td class="esg-border-b">
    </td>
  </tr>
</table>