mjml-wrapper-anthill

mjml-wrapper

Usage no npm install needed!

<script type="module">
  import mjmlWrapperAnthill from 'https://cdn.skypack.dev/mjml-wrapper-anthill';
</script>

README

mjml-wrapper

wrapper

Wrapper enables to wrap multiple sections together. It's especially useful to achieve nested layouts with shared border or background images across sections.

<mjml>
  <mj-body>
    <mj-wrapper border="1px solid #000000" padding="50px 30px">
      <mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px">
        <mj-column>
          <mj-image padding="0" src="https://placeholdit.imgix.net/~text?&w=350&h=150" />
        </mj-column>
      </mj-section>
      <mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa">
        <mj-column border="1px solid #dddddd">
          <mj-text padding="20px"> First line of text </mj-text>
          <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" />
          <mj-text padding="20px"> Second line of text </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

try it live

The full-width property will be used to manage the background width. By default, it will be 600px. With the full-width property on, it will be changed to 100%.

attribute unit description default value
background-color color section color n/a
background-repeat string css background repeat repeat
background-size percent/px css background size auto
background-url url background url n/a
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-radius px border radius n/a
border-right string css border format n/a
border-top string css border format n/a
css-class string class name, added to the root HTML element created n/a
full-width string make the wrapper full-width n/a
padding px supports up to 4 parameters 20px 0
padding-bottom px section bottom offset n/a
padding-left px section left offset n/a
padding-right px section right offset n/a
padding-top px section top offset n/a
text-align string css text-align center
vertical-align string css vertical-align top