<mjml>
  <mj-head>
    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:300,500"></mj-font>
    <mj-attributes>
      <mj-all font-family="Roboto, Helvetica, sans-serif"></mj-all>
      <mj-text font-weight="300" font-size="16px" color="#616161" line-height="24px"></mj-text>
      <mj-section padding="0px"></mj-section>
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section padding="20px 0">
      <mj-column width="100%">
        <mj-text align="left" font-size="10px">
          Message from BlueWave Uptime Service
        </mj-text>
      </mj-column>
      <mj-column width="45%" padding-top="20px">
        <mj-text align="center" font-weight="500" padding="0px" font-size="18px" color="red">
          Google.com is down
        </mj-text>
        <mj-divider border-width="2px" border-color="#616161"></mj-divider>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column width="100%">
        <mj-text>
          <p>Hello {{name}}!</p>
          <p>
            We detected an incident on one of your monitors. Your service is currently
            down. We'll send a message to you once it is up again.
          </p>
          <p><b>Monitor name:</b> {{monitor}}</p>
          <p><b>URL:</b> {{url}}</p>
        </mj-text>
      </mj-column>
      <mj-column width="100%">
        <mj-divider border-width="1px" border-color="#E0E0E0"></mj-divider>
        <mj-button background-color="#1570EF"> View incident details </mj-button>
        <mj-text font-size="12px">
          <p>This email was sent by BlueWave Uptime.</p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>