Avatars

Circular

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

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

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

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

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

import { MjmlImage } from '@faire/mjml-react';

function Example() {
  return (
    <>
      {/* XS */}
      <MjmlImage src="/assets/avatar.jpg" width="24px" height="24px" padding="0 0 24px 0" borderRadius="9999px" />

      {/* SM */}
      <MjmlImage src="/assets/avatar.jpg" width="32px" height="32px" padding="0 0 24px 0" borderRadius="9999px" />

      {/* MD */}
      <MjmlImage src="/assets/avatar.jpg" width="40px" height="40px" padding="0 0 24px 0" borderRadius="9999px" />

      {/* LG */}
      <MjmlImage src="/assets/avatar.jpg" width="48px" height="48px" padding="0 0 24px 0" borderRadius="9999px" />

      {/* XL */}
      <MjmlImage src="/assets/avatar.jpg" width="56px" height="56px" padding="0 0 24px 0" borderRadius="9999px" />
    </>
  );
}

export default Example;

Buttons

Basic

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

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

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

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

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

import { MjmlButton } from '@faire/mjml-react';

function Example() {
  return (
    <>
      {/* XS */}
      <MjmlButton
        href="#"
        background-color="#2B7FFF"
        color="#FFFFFF"
        borderRadius="4px"
        padding="0 0 24px 0"
        inner-padding="6px 10px"
        font-size="12px"
        font-weight="500"
      >
        Button
      </MjmlButton>

      {/* SM */}
      <MjmlButton
        href="#"
        background-color="#2B7FFF"
        color="#FFFFFF"
        borderRadius="6px"
        padding="0 0 24px 0"
        inner-padding="8px 12px"
        font-size="14px"
        font-weight="500"
      >
        Button
      </MjmlButton>

      {/* MD */}
      <MjmlButton
        href="#"
        background-color="#2B7FFF"
        color="#FFFFFF"
        borderRadius="6px"
        padding="0 0 24px 0"
        inner-padding="8px 16px"
        font-size="14px"
        font-weight="500"
      >
        Button
      </MjmlButton>

      {/* LG */}
      <MjmlButton
        href="#"
        background-color="#2B7FFF"
        color="#FFFFFF"
        borderRadius="6px"
        padding="0 0 24px 0"
        inner-padding="8px 16px"
        font-size="16px"
        font-weight="500"
      >
        Button
      </MjmlButton>

      {/* XL */}
      <MjmlButton
        href="#"
        background-color="#2B7FFF"
        color="#FFFFFF"
        borderRadius="6px"
        padding="0 0 24px 0"
        inner-padding="12px 24px"
        font-size="16px"
        font-weight="500"
      >
        Button
      </MjmlButton>
    </>
  );
}

export default Example;

Badges

Basic

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

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

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

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

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

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

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

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

import { MjmlButton } from '@faire/mjml-react';

function Example() {
  return (
    <>
      <MjmlButton
        background-color="#2A80FF"
        color="#FFFFFF"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#7AE7A5"
        color="#0F7D48"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#FF7676"
        color="#8C2626"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#FFBA53"
        color="#7B6825"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#BFD9FF"
        color="#2A80FF"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#003E9A"
        color="#FFFFFF"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#FFFFFF"
        color="#878787"
        border="1px solid #D0D0D0"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>

      <MjmlButton
        background-color="#D0D0D0"
        color="#707070"
        borderRadius="9999px"
        padding="0 0 24px 0"
        inner-padding="5px 8px"
        font-size="12px"
        font-weight="500"
      >
        Badge
      </MjmlButton>
    </>
  );
}

export default Example;

Card headings

Basic

<mjml>
  <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-attributes>
      <mj-all font-family="Inter, Helvetica, Arial, sans-serif" />
    </mj-attributes>

    <mj-style>
      body {
        background-color: #F9FAFB;
        padding: 24px;
      }
    </mj-style>
  </mj-head>
  
  <mj-body>

    <mj-wrapper padding="24px" background-color="#FFFFFF" border-radius="6px">
      <mj-section padding="0 0 16px 0" 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="0" font-weight="500">
            Card Header
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>

  </mj-body>
</mjml>

import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlColumn,
  MjmlFont,
  MjmlHead,
  MjmlRaw,
  MjmlSection,
  MjmlStyle,
  MjmlText,
  MjmlWrapper,
} from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlRaw>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        </MjmlRaw>

        <MjmlFont
          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"
        />

        <MjmlAttributes>
          <MjmlAll font-family="Inter, Helvetica, Arial, sans-serif" />
        </MjmlAttributes>

        <MjmlStyle>
          {`
            body {
              background-color: #F9FAFB;
              padding: 24px;
            }
          `}
        </MjmlStyle>
      </MjmlHead>

      <MjmlBody>
        <MjmlWrapper padding="24px" backgroundColor="#FFFFFF" borderRadius="6px">
          <MjmlSection padding="0 0 16px 0" borderBottom="1px solid #EAEAEA">
            <MjmlColumn padding="0" verticalAlign="middle">
              <MjmlText padding="0" color="#000000" align="left" fontSize="16px" lineHeight="0" fontWeight="500">
                Card Header
              </MjmlText>
            </MjmlColumn>
          </MjmlSection>
        </MjmlWrapper>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

Section headings

Basic

<mjml>
  <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-attributes>
      <mj-all font-family="Inter, Helvetica, Arial, sans-serif" />
    </mj-attributes>

    <mj-style>
      body {
        background-color: #F9FAFB;
        padding: 24px;
      }
    </mj-style>
  </mj-head>

  <mj-body>

    <mj-section padding="0 0 12px 0" 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">
          Section Header
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlColumn,
  MjmlFont,
  MjmlHead,
  MjmlRaw,
  MjmlSection,
  MjmlStyle,
  MjmlText,
} from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlRaw>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        </MjmlRaw>

        <MjmlFont
          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"
        />

        <MjmlAttributes>
          <MjmlAll font-family="Inter, Helvetica, Arial, sans-serif" />
        </MjmlAttributes>

        <MjmlStyle>
          {`
            body {
              background-color: #F9FAFB;
              padding: 24px;
            }
          `}
        </MjmlStyle>
      </MjmlHead>

      <MjmlBody>
        <MjmlSection padding="0 0 12px 0" borderBottom="1px solid #EAEAEA">
          <MjmlColumn padding="0" vertical-align="middle">
            <MjmlText padding="0" color="#000000" align="left" fontSize="16px" lineHeight="28px" fontWeight="500">
              Section Header
            </MjmlText>
          </MjmlColumn>
        </MjmlSection>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

List containers

Basic with dividers

<mjml>
  <mj-head>
    <mj-style>
      body {
        background-color: #F9FAFB;
        padding: 24px;
      }
    </mj-style>
  </mj-head>

  <mj-body>

    <mj-wrapper full-width="full-width" padding="0 24px" background-color="#FFFFFF">
      <mj-section padding="24px 0 24px 0">
        <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 0 16px 0">
          <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 0 16px 0">
          <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 0 16px 0">
          <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>

  </mj-body>
</mjml>

import { Mjml, MjmlBody, MjmlButton, MjmlColumn, MjmlDivider, MjmlHead, MjmlSection, MjmlStyle, MjmlWrapper } from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlStyle>
          {`
            body {
              background-color: #F9FAFB;
              padding: 24px;
            }
          `}
        </MjmlStyle>
      </MjmlHead>

      <MjmlBody>
        <MjmlWrapper fullWidth padding="0 24px" backgroundColor="#FFFFFF">
          <MjmlSection padding="24px 0 24px 0">
            <MjmlColumn width="100%" padding="0">
              <MjmlButton width="100%" height="48px" padding="0" backgroundColor="#FFFFFF" borderRadius="6px" border="2px dashed #E8E8E8" />
            </MjmlColumn>

            <MjmlColumn width="100%" padding="16px 0 16px 0">
              <MjmlDivider borderWidth="1px" borderColor="#E8E8E8" padding="0" />
            </MjmlColumn>

            <MjmlColumn width="100%" padding="0">
              <MjmlButton width="100%" height="48px" padding="0" backgroundColor="#FFFFFF" borderRadius="6px" border="2px dashed #E8E8E8" />
            </MjmlColumn>

            <MjmlColumn width="100%" padding="16px 0 16px 0">
              <MjmlDivider borderWidth="1px" borderColor="#E8E8E8" padding="0" />
            </MjmlColumn>

            <MjmlColumn width="100%" padding="0">
              <MjmlButton width="100%" height="48px" padding="0" backgroundColor="#FFFFFF" borderRadius="6px" border="2px dashed #E8E8E8" />
            </MjmlColumn>

            <MjmlColumn width="100%" padding="16px 0 16px 0">
              <MjmlDivider borderWidth="1px" borderColor="#E8E8E8" padding="0" />
            </MjmlColumn>

            <MjmlColumn width="100%" padding="0">
              <MjmlButton width="100%" height="48px" padding="0" backgroundColor="#FFFFFF" borderRadius="6px" border="2px dashed #E8E8E8" />
            </MjmlColumn>
          </MjmlSection>
        </MjmlWrapper>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

Tables

Basic

<mj-table padding="0" color="#6A7280" font-size="14px" line-height="20px">
  <tr style="border-bottom: 1px solid #EAEAEA;">
    <td style="padding: 0 0 16px 0; text-align: left; font-weight: 500;">
      Hoodie
    </td>
    <td style="padding: 0 0 16px 0; color: #111827; text-align: right; font-weight: 500">
      $150
    </td>
  </tr>
  <tr style="border-bottom: 1px solid #EAEAEA;">
    <td style="padding: 16px 0; text-align: left; font-weight: 500;">
      Shoes
    </td>
    <td style="padding: 16px 0; color: #111827; text-align: right; font-weight: 500">
      $500
    </td>
  </tr>
  <tr style="border-bottom: 1px solid #EAEAEA;">
    <td style="padding: 16px 0; text-align: left; font-weight: 500;">
      Tax
    </td>
    <td style="padding: 16px 0; color: #111827; text-align: right; font-weight: 500">
      $50
    </td>
  </tr>
  <tr style="border-bottom: 1px solid #EAEAEA;">
    <td style="padding: 16px 0; text-align: left; font-weight: 500;">
      Shipping
    </td>
    <td style="padding: 16px 0; 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 0; color: #111827; text-align: right; font-size: 18px; list-style: 28px; font-weight: 500">
      $700
    </td>
  </tr>
</mj-table>

import { MjmlTable } from '@faire/mjml-react';

function Example() {
  return (
    <MjmlTable padding="0" color="#6A7280" fontSize="14px" lineHeight="20px">
      <tr style={{ borderBottom: '1px solid #EAEAEA' }}>
        <td style={{ padding: '0 0 16px 0', textAlign: 'left', fontWeight: 500 }}>Hoodie</td>
        <td style={{ padding: '0 0 16px 0', color: '#111827', textAlign: 'right', fontWeight: 500 }}>$150</td>
      </tr>

      <tr style={{ borderBottom: '1px solid #EAEAEA' }}>
        <td style={{ padding: '16px 0', textAlign: 'left', fontWeight: 500 }}>Shoes</td>
        <td style={{ padding: '16px 0', color: '#111827', textAlign: 'right', fontWeight: 500 }}>$500</td>
      </tr>

      <tr style={{ borderBottom: '1px solid #EAEAEA' }}>
        <td style={{ padding: '16px 0', textAlign: 'left', fontWeight: 500 }}>Tax</td>
        <td style={{ padding: '16px 0', color: '#111827', textAlign: 'right', fontWeight: 500 }}>$50</td>
      </tr>

      <tr style={{ borderBottom: '1px solid #EAEAEA' }}>
        <td style={{ padding: '16px 0', textAlign: 'left', fontWeight: 500 }}>Shipping</td>
        <td style={{ padding: '16px 0', color: '#111827', textAlign: 'right', fontWeight: 500 }}>Free</td>
      </tr>

      <tr>
        <td style={{ color: '#111827', textAlign: 'left', fontSize: '16px', lineHeight: '24px', fontWeight: 500 }}>Total</td>
        <td
          style={{
            padding: '16px 0',
            color: '#111827',
            textAlign: 'right',
            fontSize: '18px',
            listStyle: '28px',
            fontWeight: 500,
          }}
        >
          $700
        </td>
      </tr>
    </MjmlTable>
  );
}

export default Example;

Social

Default icons

<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>

import { MjmlSocial, MjmlSocialElement } from '@faire/mjml-react';

function Example() {
  return (
    <MjmlSocial icon-size="32px" mode="horizontal">
      <MjmlSocialElement name="facebook" href="https://www.mailbites.io/" />
      <MjmlSocialElement name="github" href="https://www.mailbites.io/" />
      <MjmlSocialElement name="twitter" href="https://www.mailbites.io/" />
      <MjmlSocialElement name="linkedin" href="https://www.mailbites.io/" />
    </MjmlSocial>
  );
}

export default Example;

Spacers

Basic

Headers

Big logo center

<mjml>
  <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-attributes>
      <mj-all font-family="Inter, Helvetica, Arial, sans-serif" />
    </mj-attributes>

    <mj-style>
      body {
        background-color: #F9FAFB;
        padding: 24px;
      }
    </mj-style>
  </mj-head>

  <mj-body>

    <mj-section>
      <mj-column>
        <mj-image src="/assets/logo.png" width="164px" padding="0" />

        <mj-text align="center" padding="36px 0 12px 0">
          <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">
          Lorem #2356-9876
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlColumn,
  MjmlFont,
  MjmlHead,
  MjmlImage,
  MjmlRaw,
  MjmlSection,
  MjmlStyle,
  MjmlText,
} from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlRaw>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        </MjmlRaw>

        <MjmlFont
          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"
        />

        <MjmlAttributes>
          <MjmlAll font-family="Inter, Helvetica, Arial, sans-serif" />
        </MjmlAttributes>

        <MjmlStyle>
          {`
            body {
              background-color: #F9FAFB;
              padding: 24px;
            }
          `}
        </MjmlStyle>
      </MjmlHead>

      <MjmlBody>
        <MjmlSection>
          <MjmlColumn>
            <MjmlImage src="/assets/logo.png" width="164px" padding="0" />

            <MjmlText align="center" padding="36px 0 12px 0">
              <h2 style={{ margin: 0 }}>Cras ac eros vitae lorem scelerisque feugiat</h2>
            </MjmlText>

            <MjmlText padding="0" color="#878787" align="center" fontSize="15px" fontWeight="400">
              Lorem #2356-9876
            </MjmlText>
          </MjmlColumn>
        </MjmlSection>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

Footers

Basic

<mjml>
  <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-attributes>
      <mj-all font-family="Inter, Helvetica, Arial, sans-serif" />
    </mj-attributes>

    <mj-style>
      body {
        background-color: #F9FAFB;
        padding: 24px;
      }

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

  <mj-body>

    <mj-section>
      <mj-column>
        <mj-text padding="0 0 12px 0" color="#000000" font-size="14px" line-height="24px" font-weight="400">
          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">
          Copyright © Mailbites. All rights reserved.<br />
          John Doe Ave., 32349 Faketown
        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlColumn,
  MjmlFont,
  MjmlHead,
  MjmlRaw,
  MjmlSection,
  MjmlStyle,
  MjmlText,
} from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlRaw>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        </MjmlRaw>

        <MjmlFont
          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"
        />

        <MjmlAttributes>
          <MjmlAll font-family="Inter, Helvetica, Arial, sans-serif" />
        </MjmlAttributes>

        <MjmlStyle>
          {`
            body {
              background-color: #F9FAFB;
              padding: 24px;
            }

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

      <MjmlBody>
        <MjmlSection>
          <MjmlColumn>
            <MjmlText padding="0 0 12px 0" color="#000000" font-size="14px" line-height="24px" font-weight="400">
              Too many emails?{' '}
              <a href="https://www.mailbites.io" className="link">
                Manage your preferences
              </a>{' '}
              or{' '}
              <a href="https://www.mailbites.io" className="link">
                unsubscribe
              </a>
              .
            </MjmlText>

            <MjmlText padding="0" color="#7C7C7C" font-size="12px" line-height="16px" font-weight="400">
              Copyright © Mailbites. All rights reserved.
              <br />
              John Doe Ave., 32349 Faketown
            </MjmlText>
          </MjmlColumn>
        </MjmlSection>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

Single column

Shell

<mjml>
  <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-attributes>
      <mj-all font-family="Inter, Helvetica, Arial, sans-serif" />
    </mj-attributes>

    <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="0" background-color="#FFFFFF" border-radius="6px" border="2px dashed #E8E8E8" />
          <!-- /Your content goes here -->
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlButton,
  MjmlColumn,
  MjmlFont,
  MjmlHead,
  MjmlRaw,
  MjmlSection,
  MjmlStyle,
  MjmlWrapper,
} from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlRaw>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        </MjmlRaw>

        <MjmlFont
          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"
        />

        <MjmlAttributes>
          <MjmlAll font-family="Inter, Helvetica, Arial, sans-serif" />
        </MjmlAttributes>

        <MjmlStyle>
          {`
            body {
              padding: 24px 12px;
            }
          `}
        </MjmlStyle>
      </MjmlHead>

      <MjmlBody>
        <MjmlWrapper fullWidth backgroundColor="#FFFFFF">
          <MjmlSection padding="0">
            <MjmlColumn padding="0">
              {/* Your content goes here */}
              <MjmlButton
                width="100%"
                height="384px"
                padding="0"
                backgroundColor="#FFFFFF"
                borderRadius="6px"
                border="2px dashed #E8E8E8"
              />
              {/* /Your content goes here */}
            </MjmlColumn>
          </MjmlSection>
        </MjmlWrapper>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

Action

Basic

<mjml>
  <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-attributes>
      <mj-all font-family="Inter, Helvetica, Arial, sans-serif" />
    </mj-attributes>

    <mj-style>
      body {
        padding: 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="/assets/logo.png" width="164px" padding="0" align="left" />

          <mj-text padding="36px 0 12px 0">
            <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">
            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 0 12px 0" inner-padding="8px 16px" font-size="14px" font-weight="500">
            Take action
          </mj-button>

          <mj-text padding="0" color="#7C7C7C" font-size="12px" line-height="20px" font-weight="400">
            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 0 0 0">
        <mj-column padding="0">
          <mj-divider border-width="1px" border-color="#F0F0F0" padding="0 0 20px 0" />

          <mj-text padding="0 0 12px 0" color="#000000" font-size="14px" line-height="24px" font-weight="400">
            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">
            Copyright © Mailbites. All rights reserved.<br />
            John Doe Ave., 32349 Faketown
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>

import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlButton,
  MjmlColumn,
  MjmlDivider,
  MjmlFont,
  MjmlHead,
  MjmlImage,
  MjmlRaw,
  MjmlSection,
  MjmlStyle,
  MjmlText,
  MjmlWrapper,
} from '@faire/mjml-react';

function Example() {
  return (
    <Mjml>
      <MjmlHead>
        <MjmlRaw>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        </MjmlRaw>

        <MjmlFont
          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"
        />

        <MjmlAttributes>
          <MjmlAll font-family="Inter, Helvetica, Arial, sans-serif" />
        </MjmlAttributes>

        <MjmlStyle>
          {`
            body {
              padding: 24px;
            }
            
            .link {
              color: #2B7FFF;
              text-decoration: none;
              font-weight: 500;
            }
          `}
        </MjmlStyle>
      </MjmlHead>

      <MjmlBody>
        <MjmlWrapper fullWidth backgroundColor="#FFFFFF">
          <MjmlSection padding="0">
            <MjmlColumn padding="0">
              <MjmlImage src="/assets/logo.png" width="164px" padding="0" align="left" />

              <MjmlText padding="36px 0 12px 0">
                <h2 style={{ margin: 0, lineHeight: '28px' }}>Hi @emmakit 🚀</h2>
              </MjmlText>

              <MjmlText padding="0" color="#7C7C7C" fontSize="15px" lineHeight="24px" fontWeight="400">
                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.
              </MjmlText>

              <MjmlButton
                href="#"
                align="left"
                backgroundColor="#2B7FFF"
                color="#FFFFFF"
                borderRadius="6px"
                padding="32px 0 12px 0"
                innerPadding="8px 16px"
                fontSize="14px"
                fontWeight="500"
              >
                Take action
              </MjmlButton>

              <MjmlText padding="0" color="#7C7C7C" fontSize="12px" lineHeight="20px" fontWeight="400">
                Cras ac eros vitae lorem scelerisque feugiat. Quisque commodo auctor felis, a Interdum ante dictum pharetra. Suspendisse
                gravida nec massa in blandit.
              </MjmlText>
            </MjmlColumn>
          </MjmlSection>

          <MjmlSection padding="24px 0 0 0">
            <MjmlColumn padding="0">
              <MjmlDivider borderWidth="1px" borderColor="#F0F0F0" padding="0 0 20px 0" />

              <MjmlText padding="0 0 12px 0" color="#000000" fontSize="14px" lineHeight="24px" fontWeight="400">
                Too many emails?{' '}
                <a href="https://www.mailbites.io" className="link">
                  Manage your preferences
                </a>{' '}
                or{' '}
                <a href="https://www.mailbites.io" className="link">
                  unsubscribe
                </a>
                .
              </MjmlText>

              <MjmlText padding="0" color="#7C7C7C" fontSize="12px" lineHeight="16px" fontWeight="400">
                Copyright © Mailbites. All rights reserved.
                <br />
                John Doe Ave., 32349 Faketown
              </MjmlText>
            </MjmlColumn>
          </MjmlSection>
        </MjmlWrapper>
      </MjmlBody>
    </Mjml>
  );
}

export default Example;

Want product news and updates?

We care about your data. Read our privacy policy.