mj-section

Sections are intended to be used as rows within your email. They will be used to structure the layout.

The full-width property will be used to manage the background width. By default, it will be 600px. With the full-width property on, it will be changed to 100%.

Inverting the order in which columns display: set the `direction` attribute to `rtl` to change the order in which columns display on desktop. Because MJML is mobile-first, structure the columns in the order you want them to stack on mobile, and use `direction` to change the order they display on desktop.

Sections cannot be nested into sections. Also, any content in a section should also be wrapped in a column.

<mjml>
  <mj-body>
    <mj-section full-width="full-width" background-color="red">
      <!-- Your columns go here -->
    </mj-section>
  </mj-body>
</mjml>

Here are some attribute you can use on this element -

• full-width make the section full width.
• border
• border-bottom
• border-left
• border-right
• border-top
• border-radius
• background-color
• background-url If you want to use any image as the background, use this attribute.
• background-repeat
• background-size
• vertical-align
• text-align
• padding
• padding-top
• padding-bottom
• padding-left
• padding-right
• direction ltr/rtl
• css-class