README - Mjml — ContextQMD

mj-section

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

xml

<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%.

<div class="alert alert-note" role="alert"> <p>Note</p> <p>To invert the order in which columns display in the desktop view, first setup your columns in the order you want them to appear stacked in the mobile view and then add <code>direction="rtl"</code> to the <code>mj-section</code> tag.</p> </div> <div class="alert alert-caution" role="alert"> <p>Caution</p> <p><code>mj-section</code> tags cannot nest in other <code>mj-section</code> tags</p> </div> <div class="alert alert-important" role="alert"> <p>Important</p> <p>Limitations of <code>background-image</code> <code>background-size</code> and <code>background-position</code> in Outlook desktop :</p> <ul> <li>If <code>background-size</code> is not specified, <code>no-repeat</code> will be ignored in Outlook.</li> <li>If the specified <code>background-size</code> is a single attribute in percent, the height will be <code>auto</code> as in standard CSS. In Outlook, the image will never overflow the element, it will shrink instead of being cropped similar to other clients.</li> </ul> </div>

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`