Sections, columns, and wrappers are the structural backbone of your email. They don't contain visible content themselves—they organize everything else. Understanding these three components is the key to building reliable, responsive email layouts.
Wrapper (mj-wrapper)
A wrapper is the outermost structural container. Think of it as a "super-section" that can hold multiple sections and apply a shared background color or image across all of them.
Tip: Unlike other layers, you can rename wrappers to whatever you like without breaking the export. Use descriptive names like "Hero Wrapper", "Product Grid Wrapper", or "Footer Wrapper" to keep complex emails organized in your layers panel.
When to Use a Wrapper
- When you want a background color or image to span across multiple sections
- To group related sections visually (like a hero area with a headline section + image section)
- For full-width background colors that extend beyond the 640px content area
Properties
- Background color: Set via Figma fill. Extends edge-to-edge.
- Background image: Set via Figma fill. Requires VML for Outlook (handled by the plugin).
- Padding: Controls internal spacing around all contained sections.
Section (mj-section)
A section represents a horizontal row in your email. Every piece of content lives inside a section (which may or may not be inside a wrapper).
Key Concepts
- Full-width vs. contained: Sections default to your email's max width (640px). Full-width sections stretch edge-to-edge.
- Background: Each section can have its own background color or image.
- Direction: Content flows left-to-right by default.
Properties
Property | Description | Notes |
Background color | Section background | Set via Figma fill |
Padding | Internal spacing | Top, right, bottom, left |
Full width | Stretch to email edge | Via plugin properties |
Direction | Content flow direction | LTR or RTL |
Column (mj-column)
Columns are vertical divisions within a section. They hold your actual content—text, images, buttons, spacers, and dividers all go inside columns.
Column Rules
- Maximum 4 columns per section for reliable rendering
- Columns stack vertically on mobile (left to right becomes top to bottom)
- Column widths can be set as pixels or percentages
- Equal-width columns are most reliable; unequal widths work but test carefully
- A section with a single column creates a standard full-width content block
Properties
- Width: Set via Figma frame width. Use percentages in the plugin for responsive behavior.
- Background color: Individual column backgrounds (set via Figma fill)
- Padding: Internal padding around column content
- Vertical alignment: Top, middle, or bottom alignment of column content
- Border: Add borders around individual columns
The Complete Hierarchy
Here's how everything nests together:
Email Frame → Wrapper (optional) → Section → Column → Content
Important: Never place content directly inside a section. Content must always be inside a column. Copilot will catch this if you forget, but getting the hierarchy right from the start saves time.
Common Layout Patterns
Single Column
One section with one column. The simplest layout—great for text-heavy emails, announcements, and newsletters.
Two Column
One section with two columns. Perfect for side-by-side content like image + text, or feature comparison.
Three Column
One section with three columns. Use for product grids, feature highlights, or icon-based layouts. Stacks neatly on mobile.
Mixed
Multiple sections with different column counts. A hero (1 column) followed by products (3 columns) followed by a CTA (1 column). This is the most common pattern in marketing emails.
Powered by