# Block Reference 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](https://envoke-developers.pages.dev/email-html/editable-templates/#rows-and-regions). The examples use the 660-pixel width of a one-column section; in a column, use the column's width instead (see [Columns](https://envoke-developers.pages.dev/email-html/editable-templates/#columns)). --- ## Text Headings, paragraphs, lists, and links. ```html

Spring courses

Registration opens on March 3. See the full list.

``` - 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](#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 ```html

``` - 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-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](https://envoke-developers.pages.dev/email-html/editable-templates/#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. ```html

``` | 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. ```html

``` 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. ```html

``` The region holds one link containing one image. The image rules are the same as for an [image block](#image). --- ## 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](https://developers.envoke.com).*