Have ideas to improve npm?Join in the discussion! »

    mjml-group

    4.10.0 • Public • Published

    mj-group

    Desktop
    easy and quick; responsive

    Mobile
    easy and quick; responsive

    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>

    try it live

    Column inside a group must have a width in percentage, not in pixel You can have both column and group inside a Section iOS 9 Issue: If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the blank space between the two columns inside a mj-group.
    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

    Keywords

    none

    Install

    npm i mjml-group

    DownloadsWeekly Downloads

    185,410

    Version

    4.10.0

    License

    MIT

    Unpacked Size

    11.4 kB

    Total Files

    4

    Homepage

    mjml.io

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar