Block catalogue
There are twenty-seven block types across four tabs. The search box at the top of the library searches all four at once.
Content
Section titled “Content”The five you will use in almost every email.
| Block | What it is for |
|---|---|
| Heading | A title or heading, at h1, h2, or h3 |
| Text | A paragraph |
| Image | A picture, optionally linked |
| Button | A call-to-action button |
| List | A bulleted or numbered list |
Layout
Section titled “Layout”| Block | What it is for |
|---|---|
| Divider | A horizontal rule |
| Spacer | Vertical space |
| Columns | Two containers you drop other blocks into |
| Card | Wraps content in a bordered, coloured box |
The Columns block is not the only way to get side-by-side content. Setting Layout Width on ordinary blocks does the same thing with less structure — Blocks and layout covers which to use.
Marketing
Section titled “Marketing”| Block | What it is for |
|---|---|
| Social Links | A row of social media icons |
| Countdown Timer | A countdown to a date, for urgency |
| Testimonial | A customer quote with an author, role, and rating |
| Promo Banner | A full-width promotional strip |
| Video Thumbnail | A video still with a play button over it |
| Event Card | An event’s date, time, and location |
| Pricing Table | A comparison of plans |
| Product Card | A product image, description, and buy button |
The Video Thumbnail block is worth understanding before you reach for it. Email clients do not play video, so this is a picture that links out to wherever the video actually lives.
Advanced
Section titled “Advanced”| Block | What it is for |
|---|---|
| Profile | A team member or signature card |
| HTML Code | Raw HTML for anything the other blocks cannot do |
| Table | A data table, for invoices and details |
| Menu | A row of navigation links |
| Footer | Company details, unsubscribe link, and social icons |
| Image Gallery | A grid of images |
| Icon | A standalone icon with a label |
| Progress Bar | A visual progress indicator |
| Signature | An email signature |
| Map | A static location map |
Two worth calling out
Section titled “Two worth calling out”Footer is not optional for anything going to a mailing list. It holds the unsubscribe link, and an email without one is a problem in most jurisdictions before it is a design choice.
HTML Code is an escape hatch, and it is outside every safety net in the module. The accessibility checker cannot inspect it, the spam checker cannot score it, and nothing stops you writing markup that a client will not render. Use it when you genuinely need something the catalogue does not offer, and test the result in a real inbox rather than in preview.
What every block shares
Section titled “What every block shares”Layout Width — 100%, 50%, 33%, or 25%. Consecutive blocks whose widths total 100% sit side by side.
Most also have Alignment, and every block has the same hover toolbar: move up, move down, duplicate, save as a snippet, delete.
Related
Section titled “Related”Build with blocks covers adding and editing them. Editor toolbar covers everything above the canvas.