Columns enable you to horizontally organize the content within your sections. They must be located under mj-section tags in order to be considered by the engine. To be responsive, columns are expressed in terms of percentage. 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.

mj_column(...)

Arguments

...

Unnamed items that comprise this list of MJML tags.

Function

  • mj_section Horizontal sections.

  • mj_container Standard container.

  • mj_column Column, up to four.

See also

Examples

mj_ml( mj_body( mj_container( mj_section( mj_column( mj_text("First Column") ), mj_column( mj_text("Second Column") ) ), mj_section( mj_column( mj_text("First Column") ), mj_column( mj_text("Second Column") ), mj_column( mj_text("Third Column") ) ) ) ) )
#> <mjml> #> <mj-body> #> <mj-container> #> <mj-section> #> <mj-column> #> <mj-text>First Column</mj-text> #> </mj-column> #> <mj-column> #> <mj-text>Second Column</mj-text> #> </mj-column> #> </mj-section> #> <mj-section> #> <mj-column> #> <mj-text>First Column</mj-text> #> </mj-column> #> <mj-column> #> <mj-text>Second Column</mj-text> #> </mj-column> #> <mj-column> #> <mj-text>Third Column</mj-text> #> </mj-column> #> </mj-section> #> </mj-container> #> </mj-body> #> </mjml>