mjml

name	mjml
description	This skill should be used when the user asks about MJML syntax, components, or attributes, when writing or editing MJML email templates, when creating responsive email layouts, when troubleshooting MJML rendering issues, or when asking about email client compatibility.
version	1.0.0

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-hero

Critical 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-group to 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