mail-server/resources/html-templates/calendar-invite.mjml

<mjml>
  <mj-head>
    <mj-title>Event Changed</mj-title>
    <mj-preview>An event you're attending has been updated</mj-preview>
    <mj-attributes>
      <mj-all font-family="Arial, sans-serif" />
      <mj-text font-size="14px" color="#333333" line-height="1.4" />
      <mj-button background-color="#4CAF50" color="white" font-size="11px" font-weight="bold" border-radius="4px" align="left"/>
    </mj-attributes>
    <mj-style inline="inline">
      .changed-pill {
      background-color: #4CAF50;
      color: white;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 8px;
      font-weight: bold;
      margin-left: 8px;
      display: inline-block;
      }
      .event-detail {
      margin-bottom: 16px;
      }
      .event-detail-label {
      font-weight: bold;
      color: #666666;
      margin-bottom: 4px;
      }
      .guest-item {
      margin-bottom: 4px;
      }
      .strikethrough {
      text-decoration: line-through;
      color: #999999;
      }
    </mj-style>
  </mj-head>
  <mj-body background-color="#f4f4f4">
    <!-- Header Alert -->
    <mj-section background-color="#4CAF50" padding="5px">
      <mj-column>
        <mj-text align="center" color="white" font-size="16px" font-weight="bold">
          This event has been updated
        </mj-text>
      </mj-column>
    </mj-section>

    <!-- Main Content -->
    <mj-section background-color="white" padding="5px 5px 5px 5px">
      <mj-column>
        <!-- Logo -->
        <mj-image src="https://stalw.art/img/logo-dark@2x.png" alt="Stalwart Logo" width="200px" align="center" padding-bottom="20px" />

        <!-- Title -->
        <mj-text css-class="event-detail">
          <div class="event-detail-label">Title</div>
          <div style="display: flex; align-items: center;">
            <span>Annual Team Building Workshop 2025</span>

          </div>
        </mj-text>

        <!-- Description -->
        <mj-text css-class="event-detail">
          <div class="event-detail-label">Description</div>
          <div>Join us for our annual team building workshop featuring interactive activities, networking sessions, and strategic planning for the upcoming year. This year's theme focuses on collaboration and innovation.</div>
        </mj-text>

        <!-- When -->
        <mj-text css-class="event-detail">
          <div class="event-detail-label">When <span class="changed-pill">CHANGED</span></div>
          <div class="strikethrough">Friday, March 15, 2025 9:00 AM - 5:00 PM (PST)</div>
          <div>Friday, March 15, 2025 9:00 AM - 5:00 PM (PST)</div>
        </mj-text>

        <!-- Location -->
        <mj-text css-class="event-detail">
          <div class="event-detail-label">Location</div>
          <div>Grand Conference Center<br>123 Business Park Drive<br>San Francisco, CA 94105</div>
        </mj-text>

        <!-- Guest List -->
        <mj-text css-class="event-detail" padding-bottom="30px">
          <div class="event-detail-label">Guest List</div>
          <div class="guest-item">• John Smith (john.smith@company.com)</div>
          <div style="margin-top: 8px; color: #666666; font-style: italic;">+ 12 more attendees</div>
        </mj-text>

        <!-- RSVP legend -->
        <mj-divider border-color="#e0e0e0" border-width="1px" padding="10px 0" />

        <mj-text font-size="14px" color="#333333" padding="10px 0px 5px 20px">
          <b>Reply</b> as email@domain.com for this event series:
        </mj-text>

      </mj-column>
    </mj-section>

    <!-- RSVP buttons -->
    <mj-section background-color="white" padding="0 5px 5px 5px">
      <mj-group>
        <mj-column width="33.3%">
          <mj-button background-color="#4CAF50" href="#" width="100%" inner-padding="8px 4px">
            YES
          </mj-button>
        </mj-column>
        <mj-column width="33.3%">
          <mj-button background-color="#f44336" href="#" width="100%" inner-padding="8px 4px">
            NO
          </mj-button>
        </mj-column>
        <mj-column width="33.3%">
          <mj-button background-color="#FF9800" href="#" width="100%" inner-padding="8px 4px">
            MAYBE
          </mj-button>
        </mj-column>
      </mj-group>
    </mj-section>

    <!-- Footer -->
    <mj-section background-color="#f8f8f8" padding="20px">
      <mj-column>
        <mj-text font-size="12px" color="#666666" align="center" line-height="1.5">
          You’re receiving this e-mail as you're listed as a participant for this event.
        </mj-text>
        <mj-text font-size="12px" color="#666666" align="center" line-height="1.5" padding-top="10px">
          Forwarding this e-mail could allow any recipient to reply to the organizer, join the guest list, extend the invitation to others, or alter your RSVP.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>