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.

HeadingTextImageGIFVideoButtonDividerSpacerSocialMenuFormTimerTableCarouselHTML

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 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

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

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 <table> (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

Elements

Elements

Common properties#

Heading#

Text#

Image & GIF#

Video#

Button#

Divider#

Spacer#

Social#

Menu#

Form#

Timer#

Table#

Carousel#

HTML#