Skip to main content

​
Overview

Simple elements are the basic blocks you can add directly to your emails and components. These are leaf elements that don’t contain children—they’re the actual content of your emails.

​
Element Types

​
Text Element

The text element displays text content, optionally with a link.

Key Properties

  • Content: The text to display
  • Text Style: Style from your Style Library
  • Color: Text color (from Style Library)
  • Link: Optional URL to make it a link
  • Alignment: Left, center, right, justify

Advanced Properties

  • Padding: Inner spacing
  • Background: Background color
  • Border Radius: Rounded corners
  • Border: Width and color
Use cases: Headings, paragraphs, text with links, callouts. Toolbar shortcut: Press T or click the text icon.

​
Button Element

Creates a clickable button with a link.

Key Properties

  • Content: Button text
  • Link: Destination URL
  • Button Style: Style from your Style Library
  • Alignment: Button alignment

Visual Properties

  • Background: Background color
  • Padding: Inner spacing
  • Border Radius: Rounded corners
  • Border: Width and color
Use cases: Call to Action (CTA), important links, action buttons. Toolbar shortcut: Press B or click the button icon.
Buttons should use the Style Library via Button Style rather than manually defining colors. This ensures brand consistency.

​
Image Element

Displays an image in the email.

Key Properties

  • Source: Image URL
  • Alt Text: Description for accessibility (required)
  • Link: Optional URL (makes image clickable)
  • Dimensions: Width and height

Advanced Properties

  • Padding: Spacing around image
  • Border Radius: Rounded corners
  • Border: Width and color
  • Alignment: Left, center, right
Use cases: Logos, product photos, illustrations, hero images. Toolbar shortcut: Press I or click the image icon.
Images must be hosted on a publicly accessible server (public URL). Mailkick can proxy images for better delivery and caching.

​
Separator Element

Creates a horizontal dividing line.

Key Properties

  • Thickness: Line thickness
  • Color: Color from Style Library
  • Style: Solid, dashed, dotted

Advanced Properties

  • Width: Separator width
  • Padding: Vertical spacing around separator
  • Alignment: Left, center, right
Use cases: Section dividers, end of content markers, visual breaks. Toolbar shortcut: Press S or click the separator icon.

​
Social Element

Displays social media icons with links.

Key Properties

  • Social Links: List of social platforms (Facebook, Twitter, Instagram, LinkedIn, etc.)
  • Alignment: Left, center, right
  • Size: Icon size

Advanced Properties

  • Gap: Spacing between icons
  • Color: Icon color (from Style Library)
  • Background: Optional background
Use cases: Footer social links, header share buttons. Toolbar shortcut: Press R or click the social icon.

​
Using Elements in the Editor

All simple elements can be added via the toolbar at the top of the editor.

​
Style Library Integration

All simple elements can use design tokens from the Style Library:
  • Colors: For text, backgrounds, and borders
  • Text Styles: For text and button elements
  • Button Styles: Pre-defined button appearances
  • Link Styles: For text links
Using the Style Library guarantees visual consistency and makes global design updates effortless.