Avatars

Circular

Free


<mj-column>
  <!-- XS -->
  <mj-image src="https://www.mailbites.io/assets/avatar.jpg" width="24px"
    height="24px" padding="0px 0px 24px 0px" border-radius="9999px" />

  <!-- SM -->
  <mj-image src="https://www.mailbites.io/assets/avatar.jpg" width="32px"
    height="32px" padding="0px 0px 24px 0px" border-radius="9999px" />

  <!-- MD -->
  <mj-image src="https://www.mailbites.io/assets/avatar.jpg" width="40px"
    height="40px" padding="0px 0px 24px 0px" border-radius="9999px" />

  <!-- LG -->
  <mj-image src="https://www.mailbites.io/assets/avatar.jpg" width="48px"
    height="48px" padding="0px 0px 24px 0px" border-radius="9999px" />

  <!-- XL -->
  <mj-image src="https://www.mailbites.io/assets/avatar.jpg" width="56px"
    height="56px" padding="0px 0px 24px 0px" border-radius="9999px" />
</mj-column>

Buttons

Basic Buttons

Free


<!-- XS -->
<mj-button href="#" background-color="#2B7FFF" color="#FFFFFF"
  border-radius="4px" padding="0px 0px 24px 0px" inner-padding="6px 10px"
  font-size="12px" font-weight="500"
  font-family="Inter, Helvetica, Arial, sans-serif">
  Button
</mj-button>

<!-- SM -->
<mj-button href="#" background-color="#2B7FFF" color="#FFFFFF"
  border-radius="6px" padding="0px 0px 24px 0px" inner-padding="8px 12px"
  font-size="14px" font-weight="500"
  font-family="Inter, Helvetica, Arial, sans-serif">
  Button
</mj-button>

<!-- MD -->
<mj-button href="#" background-color="#2B7FFF" color="#FFFFFF"
  border-radius="6px" padding="0px 0px 24px 0px" inner-padding="8px 16px"
  font-size="14px" font-weight="500"
  font-family="Inter, Helvetica, Arial, sans-serif">
  Button
</mj-button>

<!-- LG -->
<mj-button href="#" background-color="#2B7FFF" color="#FFFFFF"
  border-radius="6px" padding="0px 0px 24px 0px" inner-padding="8px 16px"
  font-size="16px" font-weight="500"
  font-family="Inter, Helvetica, Arial, sans-serif">
  Button
</mj-button>

<!-- XL -->
<mj-button href="#" background-color="#2B7FFF" color="#FFFFFF"
  border-radius="6px" padding="0px 0px 24px 0px" inner-padding="12px 24px"
  font-size="16px" font-weight="500"
  font-family="Inter, Helvetica, Arial, sans-serif">
  Button
</mj-button>

Badges

Free


<mj-button background-color="#2A80FF" color="#FFFFFF" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#7AE7A5" color="#0F7D48" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#FF7676" color="#8C2626" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#FFBA53" color="#7B6825" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#BFD9FF" color="#2A80FF" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#003E9A" color="#FFFFFF" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#FFFFFF" color="#878787" border="1px solid #D0D0D0"
  border-radius="9999px" padding="0px 0px 24px 0px" inner-padding="5px 8px"
  font-size="12px" font-weight="500"
  font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

<mj-button background-color="#D0D0D0" color="#707070" border-radius="9999px"
  padding="0px 0px 24px 0px" inner-padding="5px 8px" font-size="12px"
  font-weight="500" font-family="Inter, Helvetica, Arial, sans-serif">
  Badge
</mj-button>

Card Headings

Basic

Free


<mj-wrapper padding="24px" background-color="#FFFFFF" border-radius="6px">
  <mj-section padding="0px 0px 16px 0px" border-bottom="1px solid #EAEAEA">
    <mj-column padding="0" vertical-align="middle">
      <mj-text padding="0" color="#000000" align="left" font-size="16px"
        line-height="0px" font-weight="500"
        font-family="Inter, Helvetica, Arial, sans-serif">
        Card Header
      </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>

Section Headings

Basic

Free


<mj-section padding="0px 0px 12px 0px" border-bottom="1px solid #EAEAEA">
  <mj-column padding="0" vertical-align="middle">
    <mj-text padding="0" color="#000000" align="left" font-size="16px"
      line-height="28px" font-weight="500"
      font-family="Inter, Helvetica, Arial, sans-serif">
      Section Header
    </mj-text>
  </mj-column>
</mj-section>

List Containers

Basic With Dividers

Free


<mj-wrapper full-width="full-width" padding="0px 24px"
  background-color="#FFFFFF">
  <mj-section padding="24px 0px 24px 0px">
    <mj-column width="100%" padding="0">
      <mj-button width="100%" height="48px" padding="0"
        background-color="#FFFFFF" border-radius="6px"
        border="2px dashed #E8E8E8" />
    </mj-column>

    <mj-column width="100%" padding="16px 0px 16px 0px">
      <mj-divider border-width="1px" border-color="#E8E8E8" padding="0" />
    </mj-column>

    <mj-column width="100%" padding="0">
      <mj-button width="100%" height="48px" padding="0"
        background-color="#FFFFFF" border-radius="6px"
        border="2px dashed #E8E8E8" />
    </mj-column>

    <mj-column width="100%" padding="16px 0px 16px 0px">
      <mj-divider border-width="1px" border-color="#E8E8E8" padding="0" />
    </mj-column>

    <mj-column width="100%" padding="0">
      <mj-button width="100%" height="48px" padding="0"
        background-color="#FFFFFF" border-radius="6px"
        border="2px dashed #E8E8E8" />
    </mj-column>

    <mj-column width="100%" padding="16px 0px 16px 0px">
      <mj-divider border-width="1px" border-color="#E8E8E8" padding="0" />
    </mj-column>

    <mj-column width="100%" padding="0">
      <mj-button width="100%" height="48px" padding="0"
        background-color="#FFFFFF" border-radius="6px"
        border="2px dashed #E8E8E8" />
    </mj-column>
  </mj-section>
</mj-wrapper>

Tables

Basic

Free


<mj-column width="100%" padding="0px 20px 32px 20px">
  <mj-table padding="0" color="#6A7280" font-size="14px" line-height="20px"
    font-family="Inter, Helvetica, Arial, sans-serif">
    <tr style="border-bottom: 1px solid #EAEAEA;">
      <td style="padding: 0px 0px 16px 0px; text-align: left; font-weight: 500;">
        Hoodie
      </td>
      <td
        style="padding: 0px 0px 16px 0px; color: #111827; text-align: right; font-weight: 500">
        $150
      </td>
    </tr>
    <tr style="border-bottom: 1px solid #EAEAEA;">
      <td style="padding: 16px 0px; text-align: left; font-weight: 500;">
        Shoes
      </td>
      <td
        style="padding: 16px 0px; color: #111827; text-align: right; font-weight: 500">
        $500
      </td>
    </tr>
    <tr style="border-bottom: 1px solid #EAEAEA;">
      <td style="padding: 16px 0px; text-align: left; font-weight: 500;">
        Tax
      </td>
      <td
        style="padding: 16px 0px; color: #111827; text-align: right; font-weight: 500">
        $50
      </td>
    </tr>
    <tr style="border-bottom: 1px solid #EAEAEA;">
      <td style="padding: 16px 0px; text-align: left; font-weight: 500;">
        Shipping
      </td>
      <td
        style="padding: 16px 0px; color: #111827; text-align: right; font-weight: 500">
        Free
      </td>
    </tr>
    <tr>
      <td
        style="color: #111827; text-align: left; font-size: 16px; line-height: 24px; font-weight: 500">
        Total
      </td>
      <td
        style="padding: 16px 0px; color: #111827; text-align: right; font-size: 18px; list-style: 28px; font-weight: 500">
        $700
      </td>
    </tr>
  </mj-table>
</mj-column>

Social

Default Icons

Free

<mjml lang="en">
  <mj-body>
    <mj-wrapper>
      <mj-section>
        <mj-column>

          <mj-social icon-size="32px" mode="horizontal">
            <mj-social-element name="facebook" href="https://www.mailbites.io/" />
            <mj-social-element name="github" href="https://www.mailbites.io/" />
            <mj-social-element name="twitter" href="https://www.mailbites.io/" />
            <mj-social-element name="linkedin" href="https://www.mailbites.io/" />
          </mj-social>

        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

Spacers

Basic

Free

Headers

Big Logo Center

Free


<mj-wrapper full-width="full-width">
  <mj-section>
    <mj-column>
      <mj-image src="https://www.mailbites.io/assets/logo.png" width="164px"
        padding="0" />

      <mj-text align="center" padding="36px 0px 12px 0px"
        font-family="Inter, Helvetica, Arial, sans-serif">
        <h2 style="margin: 0">
          Cras ac eros vitae lorem scelerisque feugiat
        </h2>
      </mj-text>

      <mj-text padding="0" color="#878787" align="center" font-size="15px"
        font-weight="400" font-family="Inter, Helvetica, Arial, sans-serif">
        Lorem #2356-9876
      </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>

Footers

Basic

Free


<!--
In order to highlight links include the following styles in your mj-head.


    <mj-style>
      body {
        padding: 24px 12px;
      }

      .link {
        color: #2B7FFF;
        text-decoration: none;
        font-weight: 500;
      }
    </mj-style>
    
-->

<mj-section padding="0">
  <mj-column padding="0">
    <mj-text padding="0px 0px 12px 0px" color="#000000" font-size="14px"
      line-height="24px" font-weight="400"
      font-family="Inter, Helvetica, Arial, sans-serif">
      Too many emails? <a href="https://www.mailbites.io" class="link">Manage
        your preferences</a> or <a href="https://www.mailbites.io" class="link">unsubscribe</a>.
    </mj-text>

    <mj-text padding="0" color="#7C7C7C" font-size="12px" line-height="16px"
      font-weight="400" font-family="Inter, Helvetica, Arial, sans-serif">
      Copyright © Mailbites. All rights reserved.<br />
      John Doe Ave., 32349 Faketown
    </mj-text>
  </mj-column>
</mj-section>

Single Column

Shell

Free

<mjml lang="en">
  <mj-head>
    <!-- Here we import our fonts, but you can simply remove this if you don't need them -->
    <mj-raw>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    </mj-raw>
    <mj-font name="Inter"
      href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" />

    <!-- Your styles go here, but you can simply remove this if you don't need them -->
    <mj-style>
      body {
      padding: 24px 12px;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-wrapper full-width="full-width" background-color="#FFFFFF">
      <mj-section padding="0">
        <mj-column padding="0">

          <!-- Your content goes here -->
          <mj-button width="100%" height="384px" padding="0px 0px 0px 0px"
            background-color="#FFFFFF" border-radius="6px"
            border="2px dashed #E8E8E8" />
          <!-- /Your content goes here -->

        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

Action

Basic

Free

<mjml lang="en">
  <mj-head>
    <mj-raw>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    </mj-raw>
    <mj-font name="Inter"
      href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" />

    <mj-style>
      body {
      padding: 24px 24px;
      }

      .link {
      color: #2B7FFF;
      text-decoration: none;
      font-weight: 500;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-wrapper full-width="full-width" background-color="#FFFFFF">
      <mj-section padding="0">
        <mj-column padding="0">
          <mj-image src="https://www.mailbites.io/assets/logo.png" width="164px"
            padding="0" align="left" />

          <mj-text padding="36px 0px 12px 0px"
            font-family="Inter, Helvetica, Arial, sans-serif">
            <h2 style="margin: 0; line-height: 28px">
              Hi @emmakit 🚀
            </h2>
          </mj-text>

          <mj-text padding="0" color="#7C7C7C" font-size="15px"
            line-height="24px" font-weight="400"
            font-family="Inter, Helvetica, Arial, sans-serif">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui
            blanditiis praesentium voluptatum deleniti atque corrupti quos
            dolores et quas molestias excepturi sint occaecati cupiditate non
            provident.
          </mj-text>

          <mj-button href="#" align="left" background-color="#2B7FFF"
            color="#FFFFFF" border-radius="6px" padding="32px 0px 12px 0px"
            inner-padding="8px 16px" font-size="14px" font-weight="500"
            font-family="Inter, Helvetica, Arial, sans-serif">
            Take action
          </mj-button>

          <mj-text padding="0" color="#7C7C7C" font-size="12px"
            line-height="20px" font-weight="400"
            font-family="Inter, Helvetica, Arial, sans-serif">
            Cras ac eros vitae lorem scelerisque feugiat. Quisque commodo auctor
            felis, a Interdum ante dictum pharetra. Suspendisse gravida nec
            massa in blandit.
          </mj-text>
        </mj-column>
      </mj-section>

      <mj-section padding="24px 0px 0px 0px">
        <mj-column padding="0">
          <mj-divider border-width="1px" border-color="#F0F0F0"
            padding="0px 0px 20px 0px" />

          <mj-text padding="0px 0px 12px 0px" color="#000000" font-size="14px"
            line-height="24px" font-weight="400"
            font-family="Inter, Helvetica, Arial, sans-serif">
            Too many emails? <a href="https://www.mailbites.io" class="link">Manage
              your preferences</a> or <a href="https://www.mailbites.io"
              class="link">unsubscribe</a>.
          </mj-text>

          <mj-text padding="0" color="#7C7C7C" font-size="12px"
            line-height="16px" font-weight="400"
            font-family="Inter, Helvetica, Arial, sans-serif">
            Copyright © Mailbites. All rights reserved.<br />
            John Doe Ave., 32349 Faketown
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

Want product news and updates?

We care about your data. Read our privacy policy.