Developer reference

Upgrade Confirmation Card

Confirmation module for successful plan upgrades, tier changes, and billing-plan transitions.

Transactional Components blockProduction documentation pageSource file: upgrade-confirmation-card.mjmlCopyable MJML and compiled HTML

All components See layouts Get Pro - £179

Tags: upgrade · plan · billing · confirmation

Rendering screenshot

Preview frame reflects current component rendering and real spacing proportions for production email QA.

Live preview

Rendered component preview

This preview is rendered from compiled HTML output so you can inspect the actual email structure, not a static mock-up.

Rendered email preview

Usage guidance

When to use this block

Use after pricing or checkout flows when the user expects immediate confirmation of the new plan state.
Keep the active date and plan name visible without requiring the recipient to scan a longer billing email.

Developer notes

Edit MJML, ship HTML

Use MJML as the editable source of truth. The compiled HTML panel is included for ESP handoff, QA, or integration points that only accept raw HTML.

Also included in Template Hedgehog Pro for teams that want the full component archive offline.
Source file name: upgrade-confirmation-card.mjml
4 client notes currently documented for this block.

Accessibility

Accessibility notes

Label the new plan and start date clearly so the confirmation remains understandable in assistive technology.
Avoid vague confirmation copy that does not explain what changed in the account.

Rendering notes

Client-specific guidance

Gmail (Web + Mobile): Primary spacing, stack order, and CTA rendering hold up in Gmail web and mobile views.
Outlook Desktop (Windows): Two-column plan metadata remains stable, though Outlook can reduce white space between fields.

Client support

Compatibility

4 clients

Rendering support notes across major email clients.

Upgrade Confirmation Card compatibility matrix
Client	Status	Notes
Gmail (Web + Mobile)	Tested	Primary spacing, stack order, and CTA rendering hold up in Gmail web and mobile views.
Outlook Desktop (Windows)	Partial	Two-column plan metadata remains stable, though Outlook can reduce white space between fields.
Apple Mail (macOS + iOS)	Tested	No additional notes.
Yahoo Mail	Tested	No additional notes.

Used in layouts

Where this block appears in production layout systems

These layout pages include this component in context, with block order, message structure, and QA guidance alongside the rendered email.

Upgrade Confirmation System
Upgrade confirmation
Confirm plan change and next account capabilities without introducing billing ambiguity.

Related blocks

Continue building

These components are closely related by category or usage pattern and are useful when assembling a full email flow.

Transactional Components

Invoice Due Reminder

Reminder banner for upcoming invoice deadlines and payment collection nudges.

Transactional Components

Invoice Summary Card

Compact invoice summary for billing notices, finance reminders, and accounts receivable workflows.

Transactional Components

Order Confirmation Summary

Order summary module with headline, confirmation message, and compact line summary.

Source code

Copy the code you need

The source and compiled HTML shown below map directly to the rendered preview above. This keeps preview, MJML, and HTML handoff output aligned.

Snippet assembly: place this block inside the same <mj-body> as your other snippets, then stack sections in send order.

MJML snippet

Component block only. Use this when assembling an email from multiple reusable sections inside a project that already includes the shared MJML classes.

<mj-wrapper padding="0" full-width="full-width" />
      <mj-section padding="28px 34px" />
      <mj-column padding="0" />
      <mj-image padding="0 0 14px 0" />
      <mj-text padding="0 0 12px 0" font-size="16px" line-height="28px" color="#1a1a1a" />
      <mj-button padding="0" font-size="16px" font-weight="700" border-radius="999px" inner-padding="14px 30px" />

      <mj-class name="h1" font-size="42px" line-height="46px" font-weight="800" />
      <mj-class name="h2" font-size="36px" line-height="40px" font-weight="800" />
      <mj-class name="h3" font-size="30px" line-height="34px" font-weight="800" />
      <mj-class name="h4" font-size="26px" line-height="30px" font-weight="800" />
      <mj-class name="h5" font-size="22px" line-height="26px" font-weight="800" />
      <mj-class name="h6" font-size="20px" line-height="24px" font-weight="800" />
      <mj-class name="h1-display" font-size="56px" line-height="60px" font-weight="800" />
      <mj-class name="body" font-family="'Inter', Arial, sans-serif" font-size="17px" line-height="28px" />
      <mj-class name="small" font-family="'Inter', Arial, sans-serif" font-size="14px" line-height="23px" />
      <mj-class name="label" font-family="'Inter', Arial, sans-serif" font-size="12px" font-weight="700" text-transform="uppercase" letter-spacing="0.12em" />
      <mj-class name="bold" font-weight="700" />
      <mj-class name="extrabold" font-weight="800" />
      <mj-class name="white" color="#ffffff" />
      <mj-class name="light" color="#94a3b8" />
      <mj-class name="medium" color="#4a5568" />
      <mj-class name="dark" color="#1a1a1a" />
      <mj-class name="text-primary" color="#1a1a1a" />
      <mj-class name="text-muted" color="#4a5568" />
      <mj-class name="thblue" color="#2f67ef" />
      <mj-class name="whitebg" background-color="#ffffff" />
      <mj-class name="superlightbg" background-color="#f8fafc" />
      <mj-class name="thbluebg" background-color="#2f67ef" />
      <mj-class name="blackbg" background-color="#0f172a" />
      <mj-class name="darkbg" background-color="#102447" />
      <mj-class name="rocketbluebg" background-color="#183b7a" />
      <mj-class name="e3bluebg" background-color="#183b7a" />
      <mj-class name="transbg" background-color="transparent" />
      <mj-class name="badge" font-family="'Inter', Arial, sans-serif" font-size="12px" line-height="16px" font-weight="700" letter-spacing="0.12em" text-transform="uppercase" />
      <mj-class name="button" font-weight="700" />
    </mj-attributes>
    <mj-style>
      .border-top-light { border-top: 1px solid rgba(26, 26, 26, 0.1) !important; }
      .border-bottom-light { border-bottom: 1px solid rgba(26, 26, 26, 0.1) !important; }
      .grayscale img { filter: grayscale(100%); }
    </mj-style>
    
    <mj-raw>
      <meta name="color-scheme" content="light dark" />
      <meta name="supported-color-schemes" content="light dark" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    </mj-raw>
  </mj-head>
  <mj-body background-color="#f3f4f6">
<!-- #-START-# Upgrade Confirmation Card -->
<mj-wrapper mj-class="whitebg">
  <mj-section padding-bottom="18px">
    <mj-column width="520px">
      <mj-text mj-class="label thblue" align="center" padding-bottom="10px">Upgrade complete</mj-text>
      <mj-text mj-class="h4 text-primary extrabold" align="center" padding-bottom="10px">Your workspace is now on Growth Annual</mj-text>
      <mj-text mj-class="body text-muted" align="center" padding-bottom="18px">Billing and usage limits have been updated. New plan benefits are active immediately.</mj-text>
    </mj-column>
  </mj-section>
  <mj-section padding-top="0">
    <mj-column width="50%">
      <mj-text mj-class="small text-primary bold" align="center" padding-bottom="4px">New plan</mj-text>
      <mj-text mj-class="small text-muted" align="center">Growth Annual</mj-text>
    </mj-column>
    <mj-column width="50%">
      <mj-text mj-class="small text-primary bold" align="center" padding-bottom="4px">Active from</mj-text>
      <mj-text mj-class="small text-muted" align="center">17 March 2026</mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>
<!-- #-END-# Upgrade Confirmation Card -->

Compiled HTML snippet

Component-only compiled markup for block-level inspection and HTML assembly workflows.

<!-- #-START-# Upgrade Confirmation Card -->
      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
      >
        <tbody>
          <tr>
            <td>
              
        
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
        
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-bottom:18px;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:520px;" ><![endif]-->
            
      <div
         class="mj-column-px-520 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:10px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:12px;font-weight:700;letter-spacing:0.12em;line-height:28px;text-align:center;text-transform:uppercase;color:#2f67ef;"
      >Upgrade complete</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:10px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:26px;font-weight:800;line-height:30px;text-align:center;color:#1a1a1a;"
      >Your workspace is now on Growth Annual</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:18px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#4a5568;"
      >Billing and usage limits have been updated. New plan benefits are active immediately.</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    
      
      <div  style="margin:0px auto;max-width:640px;">
        
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
        >
          <tbody>
            <tr>
              <td
                 style="direction:ltr;font-size:0px;padding:28px 34px;padding-top:0;text-align:center;"
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:286px;" ><![endif]-->
            
      <div
         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >New plan</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >Growth Annual</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:286px;" ><![endif]-->
            
      <div
         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
      >
        
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
      >
        <tbody>
          <tr>
            <td  style="vertical-align:top;padding:0;">
              
      <table
         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
      >
        <tbody>
          
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;padding-bottom:4px;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;font-weight:700;line-height:23px;text-align:center;color:#1a1a1a;"
      >Active from</div>
    
                </td>
              </tr>
            
              <tr>
                <td
                   align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
                >
                  
      <div
         style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#4a5568;"
      >17 March 2026</div>
    
                </td>
              </tr>
            
        </tbody>
      </table>
    
            </td>
          </tr>
        </tbody>
      </table>
    
      </div>
    
          <!--[if mso | IE]></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
      
      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    
        
      <!--[if mso | IE]></td></tr></table><![endif]-->
    
      
            </td>
          </tr>
        </tbody>
      </table>
    <!-- #-END-# Upgrade Confirmation Card -->

Full library

Need the entire system available offline

Public component pages are there for reference and one-off use. Template Hedgehog Pro is for teams that want the full archive, local source files, compiled HTML, and a quicker implementation handoff.

Get Pro - £179 Read docs

Why teams upgrade

Stop collecting blocks one page at a time
Keep the full MJML and compiled HTML archive locally
Speed up implementation, review, and delivery across projects

Upgrade Confirmation Card

Rendered component preview

Compatibility

Where this block appears in production layout systems