mjml-group-4-terser
v4.15.5
Published
mjml-group
Downloads
937
Readme
mj-group
mj-group allows you to prevent columns from stacking on mobile. To do so, wrap the columns inside a mj-group
tag, so they'll stay side by side on mobile.
<mjml>
<mj-body>
<mj-section>
<mj-group>
<mj-column>
<mj-image width="137px" height="185px" padding="0" src="https://mjml.io/assets/img/easy-and-quick.png" />
<mj-text align="center">
<h2>Easy and quick</h2>
<p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>
</mj-text>
</mj-column>
<mj-column>
<mj-image width="166px" height="185px" padding="0" src="https://mjml.io/assets/img/responsive.png" />
<mj-text align="center">
<h2>Responsive</h2>
<p>MJML is responsive by design on most-popular email clients, even Outlook.</p>
</mj-text>
</mj-column>
</mj-group>
</mj-section>
</mj-body>
</mjml>
attribute | unit | description | default attributes --------------------|-------------|--------------------------------|-------------------------------------- width | percent/px | group width | (100 / number of non-raw elements in section)% vertical-align | string | middle/top/bottom | top background-color | string | background color for a group | n/a direction | ltr / rtl | set the display order of direct children | ltr css-class | string | class name, added to the root HTML element created | n/a