Skip to main content

MJML Signoff

Included in Premail

MJML Signoff is included automatically in Premail. It is also available separately via GitHub and npm for use in any MJML project.

Why a custom component?​

A common best practice in emails is to include a photo along side your "signoff" (such as "Best, Tamara").

Getting images to "float" alongside text, including in mobile contexts, can be tricky. <mj-signoff> simplifies this.

Example use​

An example of this can be found in the example email's content/signoff.hbs template:

<mj-signoff
  closing="Thank you,"
  name="John Q. Public"
  title="Your Friendly Neighbor"
  image-src="https://picsum.photos/75/100"
  image-width="75px"
  image-height="100px"
  image-padding="0 0 12px 0"
  image-alt=""
>
  <p><a href="https://example.com">Example, Inc.</a></p>
</mj-signoff>

Strings cannot contain HTML elements, however any content within the element itself is placed in the text column below the optional strings, as demonstrated above. Styling options are also provided in Premail's theme settings.

<mj-signoff> options​

optionunitdetailsdefault value
closingstringOptional closing, e.g. Thank you,none
namestringOptional name, e.g. John Q. Publicnone
titlestringOptional title, e.g. Wild and Crazy Guynone
title2stringOptional title line two, e.g. ACME Corp.none
title3stringOptional title line three, e.g. (202) 555-1212none
section-paddingpixelsApplies to entire element10px 0
section-alignleft, center, rightAlignment of element as a wholeleft
background-colorcolorApplies to entire elementnone
image-positionleft, rightWhere the image should appear relative to the textleft
image-paddingpixelsApplies only to the image columnnone
image-srcURLLocation of imagenone
image-widthpixelsWidth of imagenone
image-heightpixelsHeight of imagenone
image-altstringAlternative text for image (you may legitimately wish to leave this blank; see the spec for graphical representation, decorative images and example 2 here)none
text-column-paddingpixelsApplies only to the text column0 10px

Alternatives​

Instead of using this component, you can use the <mj-group> element, but note its warning for iOS 9.

If you are not using an image in your sign-off, or intend for the image to be on a line without text wrapping around it (such as an image of a signature), you can simply use MJML's <mj-text> element.