# Supported MJML components

Below this table there is an example that illustrates how the MJML output looks on Cannoli

<table><thead><tr><th width="172">MJML tag</th><th width="193">MJML output</th><th width="150" data-type="checkbox">Supported</th><th width="150">Figma Naming Convention</th><th width="150">Considerations</th><th width="150">Location</th></tr></thead><tbody><tr><td>mj-preview</td><td>&#x3C;mj-preview></td><td>true</td><td>Not necessary to add this element neither rename layers with this tag in Figma.</td><td></td><td>head</td></tr><tr><td>mj-breakpoint</td><td>&#x3C;mj-breakpoint width="480px"></td><td>true</td><td>Not necessary to add this element neither rename layers with this tag in Figma.</td><td>This tag allows you to control the breakpoint at which the layout shifts from desktop to mobile and vice versa.</td><td>head</td></tr><tr><td>mj-attributes</td><td>&#x3C;mj-attributes></td><td>true</td><td>Not necessary to add this element neither rename layers with this tag in Figma.</td><td></td><td>head</td></tr><tr><td>mj-style</td><td>&#x3C;mj-style></td><td>true</td><td>Not necessary to add this element neither rename layers with this tag in Figma.</td><td></td><td>head</td></tr><tr><td>mj-body</td><td>&#x3C;mj-body></td><td>true</td><td>Not necessary to add this element neither rename layers with this tag in Figma.</td><td>If you want to have a margin in the email with a different color than the sections, then you can use the mj-body tag in an auto-layout frame that also contains an mj-wrapper.</td><td>mjml</td></tr><tr><td>mj-button</td><td>&#x3C;mj-button></td><td>true</td><td>mj-button</td><td></td><td>body</td></tr><tr><td>mj-column</td><td>&#x3C;mj-column></td><td>true</td><td>mj-column</td><td></td><td>body</td></tr><tr><td>mj-divider</td><td>&#x3C;mj-divider></td><td>true</td><td>mj-divider</td><td></td><td>body</td></tr><tr><td>mj-group</td><td>&#x3C;mj-group></td><td>true</td><td>mj-section-group</td><td>Helps to keep the columns together, so they wont stack on top of each other on mobile.</td><td>body</td></tr><tr><td>mj-image</td><td>&#x3C;mj-image></td><td>true</td><td>mj-image</td><td></td><td>body</td></tr><tr><td>mj-section</td><td>&#x3C;mj-section></td><td>true</td><td>mj-section</td><td></td><td>body</td></tr><tr><td>mj-social</td><td>&#x3C;mj-social></td><td>true</td><td>mj-social</td><td></td><td>body</td></tr><tr><td>mj-social-element</td><td>&#x3C;mj-social-element></td><td>true</td><td>mj-social-element</td><td></td><td>body</td></tr><tr><td>mj-spacer</td><td>&#x3C;mj-spacer></td><td>true</td><td>Not necessary to add this element neither rename layers with this tag in Figma.</td><td></td><td>body</td></tr><tr><td>mj-text</td><td>&#x3C;mj-text></td><td>true</td><td>mj-text</td><td></td><td>body</td></tr><tr><td>mj-wrapper</td><td>&#x3C;mj-wrapper></td><td>true</td><td>mj-wrapper</td><td>Allows to wrap multiple sections together.</td><td>body</td></tr></tbody></table>

#### MJML output example in Cannoli

{% code overflow="wrap" lineNumbers="true" %}

```markup
<mjml>
  <mj-head>
    <mj-preview>
      Example
    </mj-preview>
    <mj-breakpoint width="480px"></mj-breakpoint>
    <mj-attributes>
      <mj-wrapper padding="0"></mj-wrapper>
      <mj-divider padding="0"></mj-divider>
      <mj-spacer padding="0"></mj-spacer>
      <mj-section padding="0"></mj-section>
      <mj-column padding="0"></mj-column>
      <mj-image padding="0"></mj-image>
      <mj-text padding="0"></mj-text>
      <mj-button padding="0"></mj-button>
      <mj-social-element padding="0"></mj-social-element>
      <mj-social padding="0"></mj-social>
    </mj-attributes>
    <mj-style>
      @media only screen and (max-width: 720px) {
    .wrapper > table > tbody > tr > td {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .section > table > tbody > tr > td {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .column > table > tbody > tr > td {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .padB40 {
        padding-bottom: 40px !important;
    }

    .image {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .image > table {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .image > table > tbody > tr > td > a > img {
        height: auto !important;
    }

    .divider {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .button > table {
        width: 100% !important;
    }

    .button > table > tbody > tr > td > a {
        width: 80% !important;
    }
}

    </mj-style>
    <mj-font href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" name="Roboto"></mj-font>
    <mj-font href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400&display=swap" name="Roboto Condensed"></mj-font>
  </mj-head>
  <mj-body width="720px">
    <mj-wrapper background-color="#ebe7e1" css-class="wrapper" padding="32px 64px 32px 64px">
      <mj-section css-class="section">
        <mj-column css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="50%">
          <mj-text align="left" color="#00989f" css-class="text" font-family="Roboto" font-size="30px" font-weight="700" letter-spacing="0px" line-height="35px" padding="20px 0px 20px 0px">
            Limited Editions Waiting For You
<br/>
          </mj-text>
          <mj-text align="left" color="#4d5043" css-class="text" font-family="Roboto" font-size="18px" font-weight="400" letter-spacing="0px" line-height="28px" padding="0px 0px 20px 0px">
            Find out what you’re missing with 20% off your first purchase.
<br/>
          </mj-text>
          <mj-button align="left" background-color="#4d5043" border-radius="4px" color="#ebe7e1" font-family="Roboto" font-size="17px" font-weight="500" href="#" inner-padding="10px 0px 10px 0px" letter-spacing="0px" line-height="19px" padding="0px 0px 0px 0px" width="85px">
            Dig It!
          </mj-button>
        </mj-column>
        <mj-column css-class="column" vertical-align="top" width="50%">
          <mj-image align="right" alt="Image" css-class="image" height="259px" href="#" src="https://media.cannoli.app/media/figma/2ae2a49de05e02151ee4a77b9eb73f47.png" width="296px">

          </mj-image>
        </mj-column>
      </mj-section>
    </mj-wrapper>
    <mj-wrapper background-color="#000000" css-class="wrapper" padding="32px 64px 32px 64px">
      <mj-section css-class="section">
        <mj-group>
          <mj-column css-class="column" padding="0px 380px 0px 0px" vertical-align="top" width="87.67%">
            <mj-text align="left" color="#f9f9f9" css-class="text" font-family="Roboto Condensed" font-size="12px" font-weight="400" letter-spacing="2px" line-height="25px" padding="0px 0px 0px 0px" text-transform="uppercase">
              best sellers
<br/>award winners
<br/>new releases
<br/>
            </mj-text>
          </mj-column>
          <mj-column css-class="column" padding="0px 8px 0px 8px" vertical-align="top" width="12.33%">
            <mj-image align="left" alt="Atomica 1" css-class="image" height="66px" href="#" padding="8px 0px 8px 0px" src="https://media.cannoli.app/media/figma/106dca045fdf1dc12d21497fa47dabbb.png" width="57px">

            </mj-image>
          </mj-column>
        </mj-group>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-spacer height="16px"></mj-spacer>
        </mj-column>
      </mj-section>
      <mj-section css-class="section">
        <mj-column css-class="column" vertical-align="top" width="100%">
          <mj-divider align="left" border-color="#f9f9f9" border-style="solid" border-width="1px" css-class="divider" padding="0px 0px 22px 0px">

          </mj-divider>
          <mj-social align="left" css-class="social" padding="0px 0px 22px 0px">
            <mj-social-element border-radius="0px" href="#" icon-size="19px" name="Icon" padding="0px 20px 0px 0px" src="https://media.cannoli.app/media/figma/18a641008a28a2c8e268c18c407de3c6.png">

            </mj-social-element>
            <mj-social-element border-radius="0px" href="#" icon-size="17px" name="Icon" padding="0px 20px 0px 0px" src="https://media.cannoli.app/media/figma/99cef1b77fd84c825d29b59a6ab61a17.png">

            </mj-social-element>
            <mj-social-element border-radius="0px" href="#" icon-size="9px" name="Icon" padding="0px 0px 0px 0px" src="https://media.cannoli.app/media/figma/9d9b73848496999f1117684a91b9ef02.png">

            </mj-social-element>
          </mj-social>
          <mj-text align="left" color="#f9f9f9" css-class="text" font-family="Roboto" font-size="14px" font-weight="400" letter-spacing="0px" line-height="20px" padding="0px 0px 0px 0px">
            Copyright  2021 Atomic Publishers. All rights reserved.
<br/>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>
```

{% endcode %}