---
title: "Elements, MailKaro Docs"
description: "MailKaro ships 14 content blocks. Drag them from the palette into a column; each has its own inspector. Below are the blocks and their configurable properties."
---

# Elements

Elements

# Elements

MailKaro ships **14 content blocks**. Drag them from the palette into a column; each has its own inspector. Below are the blocks and their configurable properties.

Heading Text Image GIF Video Button Divider Spacer Social Menu Form Timer Table Carousel HTML

✦ **Right-click any block, row, or column** for a quick-actions menu (Google-Docs style): `Cut`, `Copy`, `Paste`, `Duplicate`, `Move up/down`, `Lock`, and `Delete`, plus **Edit settings** to open that element's full inspector. Selecting an element keeps the components palette in view; the inspector opens only when you ask for it.

## Common properties

Every block shares these, at the bottom of its inspector:

- **Protection**, `locked`, `content_locked`, `style_locked`, `delete_locked`, `move_locked`.
- **Visibility**, `visible_if`, a merge-tag condition like `{{first_name}} != ""`.
- **Responsive**, `hide_desktop`, `hide_mobile`.
- **Background Color**, `block_background_color`: every block has one, just under its own colour settings (a button and a countdown call it Block Background). A colour of its own behind the block and its padding, like a column's; a button keeps its own fill inside it. None takes it off.
- **Padding** and **Margin**, `block_padding` and `block_margin` (and`_top`, `_right`, `_bottom`, `_left` for one side): padding is space inside the block's background, margin is space outside it, 0 to 200px. A block that already has its own padding keeps it and gets Margin beside it; one without (a grid, a carousel, a saved block, a custom tool) gets both in a Spacing section. Both work in Outlook.
- Any block can be saved as a **global block** (edits propagate to every instance) or annotated with **comments**.

## Heading

Single-line headline with heading styles (h1–h4).

|Property |Controls |Default |
|`text` |Headline text |"Heading" |
|`tag` |Level (h1–h4) |"h1" |
|`font_family / font_weight / font_size` |Typography (size 12–72) |"body" / "400" / 22 |
|`color` |Text color |#1a2b4a |
|`align` |left / center / right / justify |"left" |
|`line_height / letter_spacing` |Line height 80–200%, tracking 0–12px |140 / 0 |
|`container_padding` |Outer padding 0–40px |10 |

## Text

Rich text with formatting and inline merge tags (edited on-canvas).

|Property |Controls |Default |
|`html` |Rich text HTML |<p>…</p> |
|`font_family / font_weight / font_size` |Typography (size 10–72) |"body" / "400" / 16 |
|`color` |Text color |#14213d |
|`align` |left / center / right / justify |"left" |
|`line_height / letter_spacing` |80–200%, 0–12px |140 / 0 |
|`container_padding` |0–40px |10 |

## Image & GIF

Hero images, product shots, banners, and animated GIFs. Both share the same rich property set, including borders, corner radius, filters, crop, and text-wrap.

|Property |Controls |Default |
|`src / alt / href / target` |Source (uploaded, from the library or typed in Image URL; the panel shows its real size), alt text, click link (Link Type: a website, a mailto: email with subject and body, or a tel: phone number), target |, |
|`width` |Display width 10–100% |100 |
|`auto_width` |Use the image's natural width |false |
|`align` |left / center / right / justify |"center" |
|`text_wrap` |none / left / right, float so text flows beside it |"none" |
|`border_style` |none / solid / dashed / dotted |"none" |
|`border_width / border_color / border_radius` |0–20px, color, 0–80px |0 / #14213d / 18 |
|`border_top_style / _width / _color (and right, bottom, left)` |One side of its own (More Options); an unset side follows the shared border |unset |
|`border_top_left_radius (and top_right, bottom_right, bottom_left)` |One corner of its own (More Options); an unset corner follows border_radius |unset |
|`crop_aspect` |free / square / portrait / landscape / wide |"free" |
|`focal_x / focal_y` |Focal point 0–100% |50 / 50 |
|`brightness / contrast / saturation` |Filters 0–200% |100 |
|`grayscale / blur` |0–100%, 0–20px |0 / 0 |
|`padding` |Container padding 0–60px |10 |

✦ **Text wrap** floats the image and lets a following text block flow beside it (Gmail-style). It renders in Preview and the sent email; Outlook desktop ignores float and stacks, for guaranteed side-by-side use a 2-column row.

## Video

Linked video teaser (thumbnail + play affordance) that opens the video URL. Same crop/filter set as image, no border/text-wrap.

|Property |Controls |Default |
|`title / url / thumbnail / alt` |Title, link, preview image, alt |, |
|`width / auto_width` |10–100%, natural width |100 / false |
|`crop_aspect` |free / square / portrait / landscape / wide |"wide" |
|`focal_x/y, brightness, contrast, saturation, grayscale, blur` |Media filters |, |
|`padding` |0–60px |10 |

## Button

Email-safe CTA button.

|Property |Controls |Default |
|`label / href` |Text and destination |"Shop now" |
|`action_type` |open-website / send-email / call-phone / unsubscribe / view-in-browser |"open-website" |
|`background_color / color` |Background + text color (token-aware) |#ef476f / #ffffff |
|`auto_width / width` |Fit to content, or 20–100% |true / 40 |
|`border_radius` |Rounded corners 0–40px |999 |
|`border_style / border_width / border_color` |none/solid/dashed/dotted, 0–8px |none / 0 |
|`border_top_style / _width / _color (and right, bottom, left)` |One side of its own (More Options) |unset |
|`border_top_left_radius (and top_right, bottom_right, bottom_left)` |One corner of its own (More Options) |unset |
|`padding_top/right/bottom/left` |Inner padding |14 / 22 / 14 / 22 |
|`container_padding` |Outer padding 0–40px |10 |

✦ **Special links.** The `unsubscribe` and `view-in-browser` action types need no URL, they render the merge-tag tokens `{{unsubscribe_url}}` and `{{web_version_url}}`, which your email platform fills in at send time. An unsubscribe link also satisfies the [Pre-send QA](https://mailkaro.com/docs/qa-checks) unsubscribe check.

## Divider

|Property |Controls |Default |
|`color / thickness / style` |Line color, 1–8px, solid/dashed/dotted |#bbbbbb / 1 / solid |
|`width` |Line width 10–100% |100 |
|`align / container_padding` |Alignment, 0–40px |center / 10 |

## Spacer

|Property |Controls |Default |
|`height` |Vertical height 8–120px |24 |
|`background_color / container_padding` |Fill color, 0–40px |transparent / 0 |

## Social

Linked social icons from a 15-platform catalog (Facebook, X, LinkedIn, Instagram, YouTube, TikTok, WhatsApp, and more).

|Property |Controls |Default |
|`items` |List of { network, label, href }. An icon with no link shows greyed in the editor and is left out of the email |Facebook, Instagram, LinkedIn |
|`icon_type` |circle / round / square (+ black/white variants) |"circle" |
|`icon_color / icon_size` |Glyph color, 20–48px |#ffffff / 32 |
|`spacing / align / container_padding` |Gap 0–24px, alignment, 0–40px |5 / center / 10 |

## Menu

Inline navigation links for headers.

|Property |Controls |Default |
|`items` |List of { label, href } |Home, Products, Contact |
|`color / font_size / font_weight` |Link color, 10–24px, weight |#14213d / 14 / 600 |
|`spacing / align / container_padding` |Gap 0–40px, alignment, 0–40px |20 / center / 10 |

## Form

A landing-page capture block (headline + field + submit).

|Property |Controls |Default |
|`headline / button_label / field_placeholder` |Copy |"Join the waitlist" / … |
|`button_color / button_text_color` |Submit button colors |#14213d / #ffffff |
|`background_color / border_color` |Form surface |#ffffff / #d9dce5 |
|`padding / border_radius` |0–40px each |18 / 18 |

## Timer

Countdown to a date, for launches and sales.

|Property |Controls |Default |
|`label / end_date` |Caption and target datetime |"Offer ends in" / ISO date |
|`background_color / color` |Block + text color (token-aware) |#14213d / #ffffff |
|`align / padding / border_radius` |Alignment, 0–40px each |center / 18 / 18 |

## Table

An email-safe data table with a header row, striped body rows, per-cell borders, and **cell merging**, build pricing tables, comparison grids, and spec sheets that render as a real `` (with `colspan`/`rowspan`) in every client.

|Property |Controls |Default |
|`rows` |Grid of cells. + Row / − Row / + Column / − Column work at the end; the chevron on a focused cell inserts or deletes a row or column at that cell |4×3 sample |
|`header_row` |Treat the first row as a styled header (th) |true |
|`header_background / header_color` |Header row fill and text color |#14213d / #ffffff |
|`footer_row` |Style the last row as a footer |false |
|`footer_background / footer_color` |Footer fill and text color (when footer_row is on) |#14213d / #ffffff |
|`border_style / border_width / border_color` |none/solid/dashed/dotted, 0–6px, color |solid / 1 / #e6ecea |
|`cell_padding` |Inner padding of every cell, 0–30px |10 |
|`striped / stripe_color` |Zebra-stripe alternating body rows |true / #f4f8f7 |
|`font_family / font_weight` |Cell typography, theme font or Arial/Helvetica/Georgia/Trebuchet, 400–700 |"body" / "400" |
|`font_size / text_color` |Body cell size 10–24px and color |14 / #14213d |
|`line_height / letter_spacing` |80–200%, 0–12px |140 / 0 |
|`align` |Cell text align, left / center / right / justify |"left" |
|`vertical_align` |Cell vertical align, top / middle / bottom (unset sits in the middle) |unset |
|`rows[r][c].background / color / align` |One cell's own look (Active Cell in the panel, for the cell picked on the canvas); unset follows the table |unset |
|`width / container_padding` |Table width 10–100%, outer padding 0–40px |100 / 10 |
|`min_rows / max_rows` |Limits enforced by the +/− Row controls |1 / 20 |
|`min_columns / max_columns` |Limits enforced by the +/− Column controls |1 / 8 |

✦ **Edit cells on the canvas.** Click any cell and type, cell text is edited inline, not in a side panel.

✦ **Merge & split cells.** On the canvas, click a cell then **Shift-click** another to select a rectangular range, then **Merge cells**, from the inspector *or* the table's **right-click menu**, to combine them into one spanning cell (any number of rows and columns). Select a merged cell and hit **Split cell** to break it back apart. Merging keeps the top-left cell's text and emits proper `colspan`/`rowspan` in the exported HTML, so merged layouts survive in Gmail, Outlook, and Apple Mail.

## Carousel

An image slider. Email has no reliable JavaScript, so the carousel degrades to a **vertical stack of images** (each optionally linked), the standard email-safe fallback that renders everywhere.

|Property |Controls |Default |
|`slides` |Array of { src, alt, href?, caption? }, add / reorder / remove in the inspector |3 sample slides |
|`align` |Carousel alignment, left / center / right |"center" |
|`width` |Max width 20–100% |100 |
|`gap` |Vertical space between stacked slides, 0–64px |12 |
|`border_radius` |Rounded image corners 0–40px |12 |
|`show_caption` |Render each slide's caption beneath it |false |

✦ Add, reorder, and remove slides in the block inspector; each slide takes an image URL, alt text, an optional link, and an optional caption.

## HTML

Raw HTML for power users. Gated by the `allow_raw_html` policy.

|Property |Controls |Default |
|`html` |Raw HTML markup |<table>… |
|`background_color / padding / border_radius` |Block surface, 0–40px each |#ffffff / 0 / 0 |

Source: https://docs.mailkaro.com/elements