Skip to main content

​
Overview

Emails are the templates you create and send to your recipients. Each email is a hierarchical structure of elements that define its content and appearance.

​
Email Structure

An email in Mailkick contains:
  • Properties: Metadata (name, description, subject, background color, width, padding)
  • Elements: Hierarchical structure of simple elements (text, button, image) and structural elements (groups, flex-rows)
  • Style Library: References to design tokens (colors, text styles, button styles, links)

​
Creating an Email

1

Create a new email

Click “New Email” in your dashboard or email list.
2

Add elements

Use the toolbar to add simple elements (Text, Image, Button) or structural elements (Columns, Group).
3

Apply styles

Use tokens from your Style Library to apply consistent styling. Select a text element and choose a text style, or a button and choose a button style.
4

Add components

Insert reusable components from your library to speed up creation. Components maintain design consistency across emails.
5

Preview

Preview your email across different clients to ensure compatibility.

​
Email Properties

Each email has configurable properties:
PropertyDescriptionExample
NameEmail identifier”Welcome Email”
DescriptionInternal description”Sent to new users after signup”
SubjectEmail subject line”Welcome to Mailkick!”
BackgroundEmail background colorWhite or brand color
WidthContent width600px
PaddingInner spacing20px

​
Element Hierarchy

Emails follow a tree structure:
  • Simple Elements (text, button, image, separator, social)
  • Groups (wrappers for multiple elements)
  • Multi-columns (layouts with side-by-side content)
  • Components (reusable blocks from your library)

​
Email Properties Reference

​
Background

The email background is applied to the entire email container. You can use:
  • A specific color picker
  • A color token from your Style Library

​
Width

Controls the maximum width of the email content. Common values:
  • 600px - Standard email width
  • 700px - Wider layouts
  • 100% - Full width (rarely used)

​
Padding

Adds spacing around the email content. Typically 20px or 40px.
The padding is applied to the email container, not individual elements. Use groups or sections for inner spacing.

​
Best Practices

Plan your email layout first. Use groups to organize sections, flex-rows for multi-column layouts.
Always use tokens from your Style Library instead of manual values. This ensures brand consistency and makes updates easier.
Multi-column layouts automatically stack on mobile, but test to ensure your email looks good on small screens.
Use optimized images and consider using Mailkick’s image proxy for better delivery.
Use the preview feature to see how your email looks across different clients before sending.