# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cannoli.app/fundamentals/supported-mjml-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.