MJML Expert
MJML (Mailjet Markup Language) is a markup language designed to reduce the pain of coding responsive emails. It compiles to responsive HTML that works across email clients.
Document Structure
Every MJML document follows this hierarchy:
<mjml>
<mj-head>
<!-- Head components: styles, fonts, attributes, preview text -->
</mj-head>
<mj-body>
<!-- Body components: sections, columns, content -->
</mj-body>
</mjml>Component Hierarchy
MJML enforces a strict nesting structure:
mjml
├── mj-head
│ ├── mj-attributes (define defaults and classes)
│ ├── mj-style (CSS styles)
│ ├── mj-font (external fonts)
│ ├── mj-title (document title)
│ ├── mj-preview (inbox preview text)
│ └── mj-breakpoint (responsive breakpoint)
│
└── mj-body
├── mj-wrapper (optional: wraps multiple sections)
│ └── mj-section
│
└── mj-section (rows)
├── mj-group (prevents column stacking on mobile)
│ └── mj-column
│
└── mj-column (responsive columns)
├── mj-text
├── mj-image
├── mj-button
├── mj-divider
├── mj-spacer
├── mj-social
├── mj-navbar
├── mj-table
├── mj-raw
├── mj-accordion
├── mj-carousel
└── mj-heroCritical rule: Content blocks (text, image, button, etc.) must always be inside mj-column. Columns must be inside mj-section or mj-group.
Column Sizing
Auto Sizing
By default, columns divide available width equally. Standard email width is 600px:
- 2 columns = 300px each
- 3 columns = 200px each
- 4 columns = 150px each
Manual Sizing
Override with explicit width attribute:
<mj-section>
<mj-column width="33%"><!-- Narrow --></mj-column>
<mj-column width="67%"><!-- Wide --></mj-column>
</mj-section>Both pixel and percentage values are supported.
Common Attributes
Most components support these attributes:
| Attribute | Description | Example |
|---|---|---|
padding | Spacing inside element | 10px 25px |
background-color | Background color | #ffffff |
width | Element width | 100% or 300px |
align | Horizontal alignment | left, center, right |
vertical-align | Vertical alignment | top, middle, bottom |
font-family | Text font | Arial, sans-serif |
font-size | Text size | 14px |
color | Text color | #333333 |
line-height | Line spacing | 1.5 or 22px |
Using Classes
Define reusable styles with mj-class:
<mj-head>
<mj-attributes>
<mj-class name="primary" background-color="#4A90D9" color="#ffffff" />
<mj-class name="heading" font-size="24px" font-weight="bold" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-button mj-class="primary">Click me</mj-button>
<mj-text mj-class="heading">Welcome</mj-text>
</mj-column>
</mj-section>
</mj-body>Background Images
Sections and wrappers support background images:
<mj-section background-url="https://example.com/bg.jpg"
background-size="cover"
background-repeat="no-repeat">
<mj-column>
<mj-text color="#ffffff">Content over image</mj-text>
</mj-column>
</mj-section>Full-Width Sections
By default, sections are constrained to 600px. Use full-width for edge-to-edge backgrounds:
<mj-section full-width="full-width" background-color="#f4f4f4">
<!-- Content still constrained, but background extends full width -->
</mj-section>Responsive Behavior
- Columns automatically stack vertically on mobile (below breakpoint)
- Use
mj-groupto prevent stacking for specific column groups - Default breakpoint is 480px; customize with
mj-breakpoint - Images scale responsively by default
Reference Documentation
For complete component specifications with all attributes:
- Body components:
${CLAUDE_SKILL_ROOT}/references/body-components.md - Head components:
${CLAUDE_SKILL_ROOT}/references/head-components.md - Layout patterns:
${CLAUDE_SKILL_ROOT}/references/patterns.md