API tools faq
paste
ryonwhyte

tempmjml

ryonwhyte
Dec 22nd, 2025 (edited)
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.73 KB | None | 0 0
raw download clone embed print report
  1. <mjml>
  2.   <mj-head>
  3.     <mj-attributes>
  4.       <mj-all font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
  5.       </mj-all>
  6.     </mj-attributes>
  7.   </mj-head>
  8.   <mj-body background-color="#f6f9fc">
  9.     <!-- Wrapper section for consistent padding -->
  10.     <mj-wrapper padding-left="0px" padding-right="0px" padding-top="5px" padding-bottom="5px">
  11.       <!-- Spacer -->
  12.       <mj-section padding-top="5px" padding-bottom="5px">
  13.       </mj-section>
  14.       <!-- Header with Logo -->
  15.       <mj-section background-color="transparent" padding-top="21px">
  16.         <mj-column>
  17.           <mj-raw>
  18.             <table role="presentation" cellpadding="0" cellspacing="0" style="width:100%;">
  19.               <tbody>
  20.                 <tr>
  21.                   <td style="width:40px;vertical-align:middle;padding:0;">
  22.                     <img src="https://demo.demo.com/media/images/Demo-icon.png" alt="Demo" width="40" height="40" style="display:block;width:40px;height:auto;"/>
  23.                   </td>
  24.                   <td style="vertical-align:middle;padding:0 0 0 8px;">
  25.                     <div style="font-size:29px;color:#0a2540;font-weight:500;line-height:1;white-space:nowrap;font-family:Arial, Helvetica, sans-serif;">Demo
  26.                     </div>
  27.                   </td>
  28.                 </tr>
  29.               </tbody>
  30.             </table>
  31.           </mj-raw>
  32.         </mj-column>
  33.       </mj-section>
  34.       <!-- Main Receipt Card -->
  35.       <mj-section background-color="#ffffff" border-radius="8px" padding-left="20px" padding-right="20px">
  36.         <mj-column padding-right="0px" padding-left="0px" padding-bottom="0px" padding-top="0px">
  37.           <!-- Receipt Header -->
  38.           <mj-text font-size="14px" color="#414552" padding-bottom="5px" padding-right="0px" padding-left="0px">
  39.             {{ pre_heading_text }}
  40.           </mj-text>
  41.           <mj-text font-size="24px" color="#0a2540" font-weight="500" padding-top="0px" padding-bottom="0px" padding-right="0px" padding-left="0px" line-height="24px" font-family="Arial, Helvetica, sans-serif">
  42.             {{ main_heading_text }}
  43.           </mj-text>
  44.           <mj-text font-size="14px" color="#414552" padding-bottom="0" padding-right="0px" padding-left="0px" padding-top="5px">
  45.             {{ sub_heading_text }}
  46.           </mj-text>
  47.         </mj-column>
  48.       </mj-section>
  49.       <!-- Divider after header -->
  50.       <mj-section background-color="#ffffff" padding-top="0px" padding-bottom="10px" padding-left="20px" padding-right="20px">
  51.         <mj-column>
  52.           <mj-divider border-color="#e6ebf1" border-width="1px" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">
  53.           </mj-divider>
  54.         </mj-column>
  55.       </mj-section>
  56.       <!-- Order Details Loop -->
  57.       <mj-raw>{% for detail in order_details %}
  58.       </mj-raw>
  59.       <mj-section background-color="#ffffff" padding-top="8px" padding-bottom="8px" padding-left="20px" padding-right="20px">
  60.         <mj-group>
  61.           <mj-column width="50%">
  62.             <mj-text font-size="14px" color="#0a2540" font-weight="600" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">{{ detail.label }}:
  63.             </mj-text>
  64.           </mj-column>
  65.           <mj-column width="50%">
  66.             <mj-text font-size="14px" color="#0a2540" align="right" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">{{ detail.value }}
  67.             </mj-text>
  68.           </mj-column>
  69.         </mj-group>
  70.       </mj-section>
  71.       <mj-section background-color="#ffffff" padding-top="7px" padding-bottom="8px" padding-left="20px" padding-right="20px" border-radius="0px 0px 5px 5px">
  72.         <mj-group>
  73.         </mj-group>
  74.       </mj-section>
  75.       <mj-raw>{% endfor %}
  76.       </mj-raw>
  77.       <!-- Spacer between cards -->
  78.       <mj-section padding-top="5px" padding-bottom="5px">
  79.         <mj-column>
  80.         </mj-column>
  81.       </mj-section>
  82.       <!-- Transaction Details Card -->
  83.       <mj-section background-color="#ffffff" border-radius="8px" padding-bottom="0px" padding-left="20px" padding-right="20px">
  84.         <mj-column>
  85.           <mj-text font-size="16px" color="#0a2540" font-weight="600" padding-right="0px" padding-left="0px">
  86.             {{ transaction_details_heading }}
  87.           </mj-text>
  88.         </mj-column>
  89.       </mj-section>
  90.       <!-- Transaction Details Loop -->
  91.       <mj-raw>{% for detail in transaction_details %}
  92.       </mj-raw>
  93.       <mj-section background-color="#ffffff" padding-top="8px" padding-bottom="8px" padding-left="20px" padding-right="20px">
  94.         <mj-group>
  95.           <mj-column width="50%">
  96.             <mj-text font-size="14px" color="#8898aa" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">{{ detail.label }}
  97.             </mj-text>
  98.           </mj-column>
  99.           <mj-column width="50%">
  100.             <mj-text font-size="14px" color="#0a2540" align="right" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">{{ detail.value }}
  101.             </mj-text>
  102.           </mj-column>
  103.         </mj-group>
  104.       </mj-section>
  105.       <mj-raw>{% endfor %}
  106.       </mj-raw>
  107.       <mj-section background-color="#ffffff" padding-top="10px" padding-bottom="10px" padding-left="20px" padding-right="20px">
  108.         <mj-column>
  109.           <mj-divider border-color="#e6ebf1" border-width="1px" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">
  110.           </mj-divider>
  111.         </mj-column>
  112.       </mj-section>
  113.       <!-- Total -->
  114.       <mj-section background-color="#ffffff" padding-top="8px" padding-bottom="8px" padding-left="20px" padding-right="20px">
  115.         <mj-group>
  116.           <mj-column width="50%">
  117.             <mj-text font-size="14px" color="#0a2540" font-weight="600" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">{{ transaction_total_label }}
  118.             </mj-text>
  119.           </mj-column>
  120.           <mj-column width="50%">
  121.             <mj-text font-size="14px" color="#0a2540" font-weight="600" align="right" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">{{ transaction_total }}
  122.             </mj-text>
  123.           </mj-column>
  124.         </mj-group>
  125.       </mj-section>
  126.       <!-- Conditional Receipt Text -->
  127.       <mj-raw>{% if receipt_text is defined and receipt_text %}
  128.       </mj-raw>
  129.       <mj-section background-color="#ffffff" padding-top="10px" padding-bottom="0px" padding-left="20px" padding-right="20px">
  130.         <mj-column>
  131.           <mj-divider border-color="#e6ebf1" border-width="1px" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">
  132.           </mj-divider>
  133.         </mj-column>
  134.       </mj-section>
  135.       <mj-section background-color="#ffffff" padding-top="10px" padding-bottom="0px" padding-left="20px" padding-right="20px">
  136.         <mj-column>
  137.           <mj-text font-size="14px" color="#414552" padding-right="0px" padding-left="0px">
  138.             {{ receipt_text }}
  139.           </mj-text>
  140.         </mj-column>
  141.       </mj-section>
  142.       <mj-raw>{% endif %}
  143.       </mj-raw>
  144.       <mj-section background-color="#ffffff" padding-top="10px" padding-left="20px" padding-right="20px">
  145.         <mj-column>
  146.           <mj-divider border-color="#e6ebf1" border-width="1px" padding-top="0px" padding-bottom="0px" padding-left="0px" padding-right="0px">
  147.           </mj-divider>
  148.         </mj-column>
  149.       </mj-section>
  150.       <!-- Support Link -->
  151.       <mj-section background-color="#ffffff" border-radius="8px" padding-top="0px" padding-bottom="30px" padding-left="20px" padding-right="20px">
  152.         <mj-column>
  153.           <mj-text font-size="14px" color="#414552" padding-right="0px" padding-left="0px">
  154.             {{ support_text }}
  155.           </mj-text>
  156.         </mj-column>
  157.       </mj-section>
  158.       <!-- CTA Button -->
  159.       <mj-section padding-left="20px" padding-right="20px" padding-bottom="0px">
  160.         <mj-column padding-top="0px" padding-bottom="0px">
  161.           <mj-button background-color="#191970" font-size="16px" font-weight="600" border-radius="6px" href="{{ cta_button_url }}" padding-top="5px" padding-bottom="5px" padding-right="0px" padding-left="0px">
  162.             {{ cta_button_text }}
  163.           </mj-button>
  164.         </mj-column>
  165.       </mj-section>
  166.       <!-- Footer -->
  167.       <mj-section padding-bottom="10px" padding-left="10px" padding-right="10px" title="Footer">
  168.         <mj-column padding-top="0px" padding-bottom="0px">
  169.           <!-- App Store Buttons -->
  170.           <mj-text align="center" padding-right="0px" padding-left="0px">
  171.             <a href="https://links.Demo.com/get-app" style="margin-right:10px;"><img src="https://demo.demo.com/media/images/Demo-play-store-badge.png" alt="Google Play" style="width:135px;height:40px;"/></a>
  172.             <a href="https://links.Demo.com/get-app"><img src="https://demo.demo.com/media/images/Demo-ios-badge.png" alt="App Store" style="width:120px;height:40px;"/></a>
  173.           </mj-text>
  174.           <mj-text align="center" font-size="12px" color="#414552" font-weight="600" padding-right="0px" padding-left="0px">
  175.             {{ social_connect_text }}
  176.           </mj-text>
  177.           <!-- Social Icons -->
  178.           <mj-social font-size="12px" icon-size="25px" mode="horizontal" padding-bottom="15px" padding-right="0px" padding-left="0px">
  179.             <mj-social-element name="facebook" href="https://www.facebook.com/DemoCentral/" background-color="transparent" color="#250707" src="https://demo.demo.com/media/images/facebook-blue.png" icon-size="32px">
  180.             </mj-social-element>
  181.             <mj-social-element name="facebook" href="https://www.tiktok.com/@Demo_central" background-color="transparent" color="#250707" src="https://demo.demo.com/media/images/tiktok-blue.png" icon-size="32px">
  182.             </mj-social-element>
  183.             <mj-social-element name="twitter" href="https://x.com/Demo_central" background-color="transparent" src="https://demo.demo.com/media/images/x-blue.png" icon-size="32px">
  184.             </mj-social-element>
  185.             <mj-social-element name="instagram" href="https://www.instagram.com/Demo_central/" background-color="transparent" src="https://demo.demo.com/media/images/ig-blue.png" icon-size="32px">
  186.             </mj-social-element>
  187.           </mj-social>
  188.           <mj-text align="center" font-size="11px" color="#687385" line-height="1.6" padding-right="0px" padding-left="0px">
  189.             {{ footer_company }}
  190.             <br/>{{ footer_address }}
  191.           </mj-text>
  192.           <mj-text align="center" font-size="10px" color="#687385" padding-top="0px" line-height="1.5" padding-right="0px" padding-left="0px">
  193.             {{ footer_disclaimer }}
  194.           </mj-text>
  195.         </mj-column>
  196.       </mj-section>
  197.       <!-- Bottom Spacer -->
  198.     </mj-wrapper>
  199.   </mj-body>
  200. </mjml>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!