mjml-column

mj-column

Columns enable you to organize the content of your sections into distinct columns which stack when viewed on a mobile device.

They must be located within mj-section tags in order to be considered by the engine.

Caution

The sum of columns in a section cannot be greater than the width of the parent mj-section (or 100%).

Every single column has to contain something because they are responsive containers, and will be vertically stacked on a mobile view. Any standard component, or component that you have defined and registered, can be placed within a column – except mj-column or mj-section elements.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Your first column -->
      </mj-column>
      <mj-column>
        <!-- Your second column -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Caution

Columns are used as a container for your content and should not be used to offset. Any MJML component included in a column will have a width equivalent to 100% of this column's width.

Caution

Neither the mj-column or mj-section tags can be nested in an mj-column tag

Attributes

attribute	accepts	description	default attributes
background-color	CSS color formats	background color for a column
border	string	CSS border format
border-bottom	string	CSS border format
border-left	string	CSS border format
border-radius	string	border radius
border-right	string	CSS border format
border-top	string	CSS border format
css-class	string	class name, added to the root HTML element created
direction	ltr rtl	set the display order of direct children	ltr
inner-background-color	CSS color formats	inner background color for column; requires a padding
inner-border	string	CSS border; requires a padding format
inner-border-bottom	string	CSS border format; requires a padding
inner-border-left	string	CSS border format; requires a padding
inner-border-radius	string	border radius ; requires a padding
inner-border-right	string	CSS border format; requires a padding
inner-border-top	string	CSS border format; requires a padding
padding	px %	column padding, supports up to 4 parameters
padding-bottom	px %	column bottom padding
padding-left	px %	column left padding
padding-right	px %	column right padding
padding-top	px %	column top padding
width	px %	column width	(100 / number of non-raw elements in section)%
vertical-align	top middle bottom	vertical alignment. Note: middle only applies when all mj-column instances use it	top

Try it live

Similar packages

Other packages similar to mjml-column

react-email

React Email is a library for building email templates using React components. It offers a similar approach to MJML by allowing developers to use familiar React syntax to create responsive email layouts. While MJML is more focused on a specific markup language, React Email leverages the power of React's component-based architecture.

handlebars

Handlebars is a popular templating engine that can be used to create dynamic email templates. Unlike MJML, which is specifically designed for responsive email design, Handlebars is a general-purpose templating engine that can be used for various types of HTML generation, including emails.