Block Reference

View as Markdown

Markup for each kind of block the drag-and-drop editor can edit. Each example is one row: put it inside a section as shown in Making HTML Editable. The examples use the 660-pixel width of a one-column section; in a column, use the column’s width instead (see Columns).

Text

Headings, paragraphs, lists, and links.

<div class="block-inner">
  <table class="inner-table" align="center" cellpadding="0" cellspacing="0" width="660">
    <tr>
      <td class="inner-column" style="padding: 15px 20px; line-height: 1.5;" align="left" valign="top">
        <div class="content-edit" rel="#bck-overlay">
          <h2><span style="font-size: 24px; color: #1e3457;">Spring courses</span></h2>
          <p>&nbsp;</p>
          <p>Registration opens on <b>March 3</b>. <u><a href="https://www.example.com/courses">See the full list</a></u>.</p>
        </div>
      </td>
    </tr>
  </table>
</div>

Put font size and colour on a  inside the paragraph or heading, as the editor does. Styles on  and headings other than text-align are removed when the text is edited (see What Text Editing Keeps).
Set the font, line height, padding, and background for the whole block on the inner-column cell.
Envoke’s style block removes the default margins from paragraphs, h1 to h4 headings, and lists, so use   for a blank line.
Links are not underlined unless they are inside , as above.

Image

<div class="block-inner">
  <table class="inner-table" align="center" cellpadding="0" cellspacing="0" width="660">
    <tr>
      <td class="inner-column mobile-full-width" style="padding: 0px; text-align: center;" align="left" valign="top">
        <div class="content-edit image-edit" style="text-align: center;" rel="#image-overlay">
          <a href="https://www.example.com/open-house"><img src="https://www.example.com/images/open-house.jpg" width="660" style="width: 660px; height: auto;" alt="Open house, Saturday April 12" class="responsive-width"></a>
        </div>
      </td>
    </tr>
  </table>
</div>

The image region holds one image, optionally wrapped in a link. When a user edits the block, the region’s content is replaced by the image (and link) from the image settings.
Always set the width attribute: the editor reads an image’s width from the attribute, not from its style. The editor does not accept an image wider than its row.
Align the image with text-align on the editable region (left, center, or right). Do not float an image that is alone in its cell: Outlook for Windows does not clear floats, so the cell collapses and the block below overlaps the image. When a user edits a floated image, the editor replaces the float with text-align.
mobile-full-width on the inner-column cell lets a full-width image reach the edges of a phone screen; without it, the cell keeps 20 pixels of padding on each side on phones.
Use absolute https:// URLs and meaningful alt text. See Image Hosting.

Image Size on Phones

Image	On phones
Class `responsive-width`	Scales to the full width of the screen
Class `actual-size`	Keeps its size

The editor sets these classes for you:

When a message is opened, every image in a row whose width attribute is under 270 pixels is given actual-size, except in three-column sections and images with the class responsive-override.
When a message is saved, every image without actual-size is given responsive-width.

So a logo or icon narrower than 270 pixels keeps its size, and anything wider scales. Add responsive-override to a small image that should scale anyway. In HTML that is sent without being opened in the editor, set responsive-width or actual-size yourself.

Image Hosting

Images can be hosted in Envoke’s file manager or anywhere else that serves them publicly over HTTPS. Use absolute https:// URLs: a relative path does not load in an inbox, and the editor only fixes relative paths to files in Envoke’s file manager, when it saves. An image that cannot be loaded when the message is opened in the editor is changed so the problem is visible (see What the Editor Adds and Changes).

Button

A button is a table, so that it renders with its background and padding in every mail client, including Outlook.

<div class="block-inner">
  <table class="inner-table" align="center" cellpadding="0" cellspacing="0" width="660">
    <tr>
      <td class="inner-column" style="padding: 0px 20px;" align="left" valign="top">
        <div class="content-edit cta-edit" style="text-align: center;" rel="#cta-overlay">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" class="nvkButtonContainer" style="min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
              <td class="nvkButtonContainerCell" style="padding-top: 10px; padding-bottom: 10px;" valign="top" align="center">
                <table border="0" cellpadding="0" cellspacing="0" class="nvkButtonTable" style="border-collapse: separate !important; border-radius: 3px; background-color: #1e3457;">
                  <tr>
                    <td align="center" valign="middle" class="nvkButtonTableCell" style="font-size: 16px; padding: 15px;">
                      <a class="nvkButton " title="Register now" href="https://www.example.com/register" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-weight: normal; letter-spacing: normal; line-height: 100%; text-align: center; text-decoration: none; color: #ffffff; display: block;">Register now</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>

Part	Holds
`nvkButtonContainerCell`	Space above and below the button (`padding-top`, `padding-bottom`)
`nvkButtonTable`	Button colour (`background-color`) and shape (`border-radius`)
`nvkButtonTableCell`	Space inside the button (`padding`) and text size
`a.nvkButton`	The link, the label, and the text colour

Keep the class names exactly as shown, including the space at the end of class="nvkButton ", which is how the editor writes it. Use the same text for the link’s label and its title. On phones, the button keeps its own width instead of stretching.

Divider

A horizontal line, drawn as the top border of a table.

<div class="block-inner">
  <table class="inner-table" align="center" cellpadding="0" cellspacing="0" width="660">
    <tr>
      <td class="inner-column" style="padding: 10px 20px;" align="left" valign="top">
        <div class="content-edit divider-edit" rel="#bck-overlay">
          <table class="nvkDivider" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; border-top: 2px solid #cccccc;">
            <tr>
              <td>
                <span></span>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>

Set the line’s weight, style, and colour in the border-top of the nvkDivider table.

Video

Mail clients cannot play video, so a video block is an image linked to the video’s page.

<div class="block-inner">
  <table class="inner-table" align="center" cellpadding="0" cellspacing="0" width="660">
    <tr>
      <td class="inner-column mobile-full-width" style="padding: 0px; text-align: center;" align="left" valign="top">
        <div class="content-edit video-edit" style="text-align: center;" rel="#video-overlay">
          <a href="https://www.youtube.com/watch?v=EXAMPLE"><img src="https://www.example.com/images/keynote-still.jpg" width="660" style="width: 660px; height: auto;" alt="Watch the keynote recording" class="responsive-width"></a>
        </div>
      </td>
    </tr>
  </table>
</div>

The region holds one link containing one image. The image rules are the same as for an image block.

What Text Editing Keeps

When a user edits the text of a block in the drag-and-drop editor, the text passes through a filter that keeps only the following. Anything else is removed from that block. Text in blocks nobody edits is left as you wrote it, and changing only a block’s style settings does not filter its text.

Element	Kept
`b`, `i`, `u`, `sub`, `sup`, `ul`, `ol`, `hr`	The element, with no attributes
`p`, `h1` to `h6`, `blockquote`, `li`, `div`	The element and its `text-align` style
`span`	The element and its `font-size`, `color`, and `background-color` styles
`a`	`href`, `target`, `name`, and `title`. A link’s `style`, `class`, and `id` are removed.
`img`	`src`, `alt`, `align`, `width`, `height`, `hspace`, `vspace`, any class, and the styles `width`, `height`, `float`, the margins, and `border-style` and `border-width`
`table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`	Every attribute and class, and the styles `font-family`, `font-size`, `line-height`, `color`, `text-align`, `vertical-align`, `width`, `height`, `min-width`, `max-width`, `white-space`, and every background, border, and padding style

Use , , and  for bold, italic, and underline, and  for font size and colour, so your formatting survives editing.

Full reference, OpenAPI description, and Postman collection: developers.envoke.com.