Search code examples
html-emailmjml

Does anybody know how I'd create a column with more than one section inside it?

Two column layout with multiple containers on left hand side

Does anybody know how I'd recreate the picture here with mjml?

I can create two columns without any issues. My problem is creating that mustard yellow container for all the mj-text tags to go into.

Is there some kind of mj-div that I can use where I can then apply styles etc?

Many thanks

Solution

  • According to MJML documentation:

    mj-text is an "ending tag", which means it can contain HTML code which will be left as it is, so it can contain HTML tags with attributes, but it cannot contain other MJML components.

    Source

    Which means you should be able to add HTML inside mj-text. Your resulting MJML will look something similar to:

    <mjml>
  <mj-body>

    <!-- Side image -->
    <mj-section background-color="white">
      <!-- left paragraph -->
      <mj-column>
        <mj-text>
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td>row 1</td>
              </tr>
              <tr>
                <td>row 2</td>
              </tr>
            </tbody>
          </table>

        </mj-text>


      </mj-column>
      <!-- right image -->
      <mj-column>
        <mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>