mjml-section

4.15.3 • Public • Published

mj-section

Sections are intended to be used as 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>

try it live

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 nest in sections. Columns can nest in sections; all content must be in a column.
attribute unit description default value
background-color color section color n/a
background-position percent / 'left','top',... (2 values max) css background position (see outlook limitations below) top center
background-position-x percent / keyword css background position x none
background-position-y percent / keyword css background position y none
background-repeat string css background repeat repeat
background-size px/percent/'cover'/'contain' css background size auto
background-url url background url n/a
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-radius px border radius n/a
border-right string css border format n/a
border-top string css border format n/a
css-class string class name, added to the root HTML element created n/a
direction ltr / rtl set the display order of direct children ltr
full-width string make the section full-width n/a
padding px supports up to 4 parameters 20px 0
padding-bottom px section bottom offset n/a
padding-left px section left offset n/a
padding-right px section right offset n/a
padding-top px section top offset n/a
text-align string css text-align center
Limitations of background-images size and position on Outlook desktop : - If background-size is not specified, no-repeat will be ignored on Outlook. - If the specified size is a single attribute in percent, the height will be auto as in standard css. On outlook, the image will never overflow the element, and it will be shrinked instead of being cropped like on other clients.

/mjml-section/

    Package Sidebar

    Install

    npm i mjml-section

    Homepage

    mjml.io

    Weekly Downloads

    562,960

    Version

    4.15.3

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • mjmlio
    • iryusa
    • loeck
    • ngarnier
    • meriadec
    • kmcb