mj-section

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

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

The full-width attribute will be used to manage the background width. Setting it will change the width of the section from the default 600px to 100%.

Attributes

| attribute | accepts | description | default value | | --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------ | ------------- | | background-color | CSS color formats | section color | | | background-position | string | CSS values, i.e. left center right + top center bottom (see outlook limitations below) | top center | | background-position-x | string | CSS values, i.e. left center right (see outlook limitations below) | | | background-position-y | string | CSS values, i.e. top center bottom (see outlook limitations below) | | | background-repeat | repeat no-repeat | set the background image to repeat | | background-size | string | CSS values e.g. auto cover contain px % size | auto | | background-url | string | background image, in URL format | | | 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 | | full-width | full-width false | make the section full-width | | | padding | px % | section padding, supports up to 4 parameters | 20px 0 | | padding-bottom | px % | section bottom padding | | | padding-left | px % | section left padding | | | padding-right | px % | section right padding | | | padding-top | px % | section top padding | | | text-align | left center right | CSS text-align | center |