Styling Components
Styling Your Email Components
The Appearance Tab
Use the Appearance tab to control the look and feel of your email design
Padding
How to use Figma Auto Layout to control padding on wrappers, columns, and content elements
Background Colors
How to set outer, content, section, and dark mode background colors in the Email Love Plugin
Aligning Frames & Content
Learn how to align your content vertically and horizontally
Full-Width Background Color
Set a full-width background color for one of your components.
Corner Radius
How to add rounded corners to images, buttons, and sections — including Outlook limitations and multi-section card layouts
Optimize Your Email for Dark Mode
Customize how your email looks in dark mode on iOS devices
Typography
Get your email typography looking just right
Why Outlook Dark Mode Is Different (And What to Do About It)
Why wrapper-based dark mode optimization doesn't work in Outlook, and how to design emails that render well with or without inversion.
Why Outlook Dark Mode Is Different (And What to Do About It)
Understanding why Outlook web breaks wrapper-based dark mode and how to design for graceful rendering instead
Hero Sections
How to build effective hero sections with background images, side-by-side layouts, and mobile-friendly designs
Background Images in Email
How to use mj-hero-image for background images, with Outlook VML handled automatically and dark mode considerations
Element Reference: Spacer & Divider
Control spacing and visual separation in your emails
Element Reference: Button
Everything you need to know about the mj-button component
Element Reference: Text
Everything you need to know about the mj-text component
Powered by