Text, images and links

Four field types fill an element’s content: Text, Rich text, Image and Link. Each one goes on one marked element.

Text

A text field replaces everything inside its element with what the marketer types. Use it for headlines, short labels, prices and single lines.

<h2 data-mm="heading" style="margin:0;font-size:22px;color:#18181b">A section heading</h2>

Setting	What it does
Multi-line	Lets marketers type line breaks, which become `<br>` in the email. Use it for addresses.
Character limit	The most characters allowed. Marketers see a count and “Keep this to 80 characters.” past it.

The marketer’s text is escaped, so <, > and & show as typed and can’t add HTML.

Where it can go: any element that can hold text, except one that has other markers inside it. It can’t go on a void element such as <img> or <br>.

Rich text

A rich text field holds paragraphs that marketers can format with bold, italic, bulleted and numbered lists, and links. Use it for body copy.

<td data-mm="body" style="padding:8px 32px;font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#3f3f46">
  <p style="margin:0 0 16px">Write a few paragraphs here.</p>
</td>

Setting	What it does
Character limit	Counts the characters of text marketers see, not the HTML tags.
Paragraph style	Inline CSS written onto every `<p>`, such as `margin:0 0 16px`.
Link style	Inline CSS written onto every `<a>`, such as `color:#18181b;text-decoration:underline`.

Many email clients ignore <style> blocks, so Modular Mail writes your paragraph and link styles onto each element. Put the font family, size, line height and colour on the marked container and they apply to every paragraph inside it.

The HTML is cleaned when the email is built. Only p, br, strong, em, u, s, a, ul, ol and li are kept, links must be safe URLs and no other attributes survive.

Where it can go: a <td>, <th> or <div>. Never a <p> or a heading, since the field holds paragraphs of its own.

Image

An image field sets an <img> element’s src and alt. Marketers choose an image from the media library, drop in a file or paste a URL, and write alt text.

<img data-mm="image" src="https://example.com/hero.jpg" width="600" alt="" style="display:block;width:100%;max-width:600px;height:auto;border:0">

Setting	What it does
Can link	Marketers can add a link around the image. The email wraps the `<img>` in an `<a href>`.

Alt text is never required, as decorative images should have empty alt text. Use help text to give the size the image is shown at and the size to upload, such as “Shown 600 wide. Upload it at 1200 × 600 for sharp screens.”

Your HTML keeps its width, height and styles, so set the display size in the template and let marketers change only the picture.

Where it can go: an <img> only.

Link

A link field sets an <a> element’s href and, normally, its text. Use it for buttons and text links.

<a data-mm="button" href="https://example.com" style="display:inline-block;padding:12px 24px;background-color:#18181b;color:#ffffff;text-decoration:none">Find out more</a>

Setting	What it does
URL only	Marketers set only the address. Whatever is inside the link stays as written, such as a social icon.
Character limit	The most characters in the link text.

A URL-only link is how you make social icons editable without letting anyone change the icon:

<a data-mm="instagram" href="https://instagram.com/yourbrand"><img src="https://example.com/instagram.png" width="24" alt="Instagram"></a>

Where it can go: an <a> only.

Allowed URLs

Link and image URLs are checked when the email is built.

Field	Allowed
Links (link fields, linked images, rich text links)	`https://`, `http://`, `mailto:`, `tel:` and addresses with no scheme
Images	`https://`, `http://` and addresses with no scheme

Addresses with no scheme are allowed so that merge tags such as {{unsubscribe_url}} or *|ARCHIVE|* pass through. javascript: and data: URLs are refused, left out of the email and shown as a problem.