5.4.0 • Published 1 month ago

mjml-section

Licence

MIT

Version

5.4.0

Deps

Size

24 kB

Vulns

Weekly

Stars

18.2K

Summary Dependency Versions

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

Note

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 direction="rtl" to the mj-section tag.

Caution

mj-section tags cannot nest in other mj-section tags

Important

Limitations of background-image background-size and background-position in Outlook desktop :

If background-size is not specified, no-repeat will be ignored in Outlook.
If the specified background-size is a single attribute in percent, the height will be auto as in standard CSS. In Outlook, the image will never overflow the element, it will shrink instead of being cropped similar to other clients.

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
gutter	`px` `%`	sets an equal spacing between each column
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`

Try it live