<mjml>
    <mj-head>
      <mj-title>Html Template</mj-title>
      <mj-font name="Alice" href="https://fonts.googleapis.com/css?family=Alice"></mj-font>
      <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:400,700"></mj-font>
      <mj-attributes>
        <mj-all font-family="Roboto, Helvetica, Arial, sans-serif" padding="0px"></mj-all>
        <mj-text font-weight="400" font-size="14px" color="#000000" line-height="21px"></mj-text>
      </mj-attributes>
    </mj-head>
    <mj-body background-color="{{#design.backgroundColor}}{{renderCondition}}{{/design.backgroundColor}}">
      {{#design.sections}}
      <mj-wrapper
          full-width="full-width"
          background-color="{{#backgroundColor}}{{renderCondition}}{{/backgroundColor}}">
        <mj-section
                {{#backgroundImage}}
                background-url="{{#url}}{{renderCondition}}{{/url}}"
                background-size="cover"
                background-repeat="no-repeat"
                {{/backgroundImage}}
                background-color="{{#contentBackgroundColor}}{{renderCondition}}{{/contentBackgroundColor}}">
          {{#columns}}
            <mj-column
                  width="{{#widthInPixels}}{{renderCondition}}{{/widthInPixels}}px"
                  background-color="{{#backgroundColor}}{{renderCondition}}{{/backgroundColor}}"
                  {{#padding}}
                  padding-top="{{#top}}{{renderCondition}}{{/top}}px"
                  padding-right="{{#right}}{{renderCondition}}{{/right}}px"
                  padding-bottom="{{#bottom}}{{renderCondition}}{{/bottom}}px"
                  padding-left="{{#left}}{{renderCondition}}{{/left}}px"
                  {{/padding}}>
                  {{#elements}}
                    {{#image}}
                    <mj-image
                    src="{{#src}}{{renderCondition}}{{/src}}"
                    alt="{{#alt}}{{renderCondition}}{{/alt}}"
                    href="{{#href}}{{renderCondition}}{{/href}}"
                    {{/image}}

                    {{#button}}
                    <mj-button
                      vertical-align="middle"
                      text-align="center"
                      color="{{#textColor}}{{renderCondition}}{{/textColor}}"
                      background-color="{{#backgroundColor}}{{renderCondition}}{{/backgroundColor}}"
                      height="{{#height}}{{renderCondition}}{{/height}}px"
                      border-radius="{{#borderRadius}}{{renderCondition}}{{/borderRadius}}px"
                    {{/button}}

                    {{#divider}}
                    <mj-divider
                    border-color="{{#color}}{{renderCondition}}{{/color}}"
                    border-style="{{#style}}{{renderCondition}}{{/style}}"
                    border-width="{{#width}}{{renderCondition}}{{/width}}px"
                    {{/divider}}

                    {{#text}}
                    <mj-group
                    {{/text}}

                    width="{{#widthInPixels}}{{renderCondition}}{{/widthInPixels}}px"
                    align="{{#align}}{{renderCondition}}{{/align}}"
                    container-background-color="{{#backgroundColor}}{{renderCondition}}{{/backgroundColor}}"
                    border="none"
                    {{#padding}}
                      padding-top="{{#top}}{{renderCondition}}{{/top}}px"
                      padding-right="{{#right}}{{renderCondition}}{{/right}}px"
                      padding-bottom="{{#bottom}}{{renderCondition}}{{/bottom}}px"
                      padding-left="{{#left}}{{renderCondition}}{{/left}}px"
                    {{/padding}}>
                    {{#image}}</mj-image>{{/image}}
                    {{#button}}{{&text}}</mj-button>{{/button}}
                    {{#divider}}</mj-divider>{{/divider}}
                    {{#text}}
                    <mj-text
                    color="{{#color}}{{renderCondition}}{{/color}}">
                    {{&content}}</mj-text></mj-group>
                    {{/text}}

                  {{/elements}}
            </mj-column>
          {{/columns}}
        </mj-section>
      </mj-wrapper>
      {{/design.sections}}
    </mj-body>
  </mjml>