docs/src/mail/mjml/invitation.mjml

<mjml>
  <mj-include path="./partial/header.mjml" />

  <mj-body mj-class="bg--blue-100">
    <mj-wrapper css-class="wrapper" padding="0 25px 0px 25px">
      <mj-section
        background-url="{{domain}}/assets/mail-header-background.png"
        background-size="cover"
        background-repeat="no-repeat"
        background-position="0 -30px"
      >
        <mj-column>
          <mj-image
            align="center"
            src="{{domain}}/assets/logo-suite-numerique.png"
            width="250px"
            align="left"
            alt="{%trans 'La Suite Numérique' %}"
          />
        </mj-column>
      </mj-section>
      <mj-section mj-class="bg--white-100" padding="30px 20px 60px 20px">
        <mj-column>
          <mj-text align="center">
            <h1>{{title|capfirst}}</h1>
          </mj-text>
          <!-- Main Message -->
          <mj-text>
            {{message|capfirst}}
            <a href="{{link}}">{{document.title}}</a>
          </mj-text>
          <mj-button
            href="{{link}}"
            background-color="#000091"
            color="white"
            padding-bottom="30px"
          >
            {% trans "Open"%}
          </mj-button>
          <mj-divider
            border-width="1px"
            border-style="solid"
            border-color="#DDDDDD"
            width="30%"
            align="center"
          />
          <mj-text>
            {% blocktrans %}
              Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team.
            {% endblocktrans %}
          </mj-text>
          <!-- Signature -->
          <mj-text>
            <p>{% trans "Brought to you by La Suite Numérique" %}</p>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>