---
title: HTML Content
slug: cuk-hol/html-content
docTags: 
createdAt: 2024-11-04T23:26:27.790Z
---

# Instructions

Copy HTML snippets by clicking on the item below and then the copy button to the right

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/eU_0Fo7d-nn9IM83FY6Fc_image.png" size="72" width="1349" height="327" position="center" showCaption="false"}

# Snippets

::::CodeDrawer{title="Email - HTML - Hero" isResponseExpanded="false"}
:::CodeblockTabsExamples
```html
<table class="structure__table" align="center" cellpadding="0" cellspacing="0" border="0" width="700" style="border-radius:0px;">
   <tbody>
      <tr>
         <th class="colspan1" style="padding-top:20px;" data-source-uuid="e978942f-b4c5-46a4-8159-a08150c9608e">
            <div class="acr-fragment acr-component image-container" data-component-id="image" style="width:100%;text-align:center;margin-bottom:20px;" data-source-uuid="6aa2ecda-7ef4-4bda-a784-c5f2b4b95b0c" data-contenteditable="false">
               <!--[if mso]>
               <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                     <td style="padding-bottom: 20px; text-align: center;" >
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                           <tr>
                              <td style="text-align: center; border-radius: 15px;" >
                                 <![endif]--><img style="width:368px;height:auto;border-radius:15px;max-width:368px;" class="" width="368" src="https://adbecdn.blob.core.windows.net/stor/msimpson/carnival-uk/stay-hydrated.png" height="215"><!--[if mso]>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
               <![endif]-->
            </div>
            <!--[if mso]>
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
               <tr>
                  <td style="padding-top: 0px; padding-bottom: 20px;" >
                     <![endif]-->
                     <div class="acr-fragment acr-component" data-component-id="text" style="margin:0px auto 20px;max-width:500px;" data-source-uuid="9a972094-f984-493a-90fe-936f5c95db51" data-contenteditable="false">
                        <!--[if mso]>
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                           <tr>
                              <td style="null" >
                                 <![endif]-->
                                 <div class="text-container" data-contenteditable="true">
                                    <p style="text-align:justify;"><span style="color:rgb(101, 106, 119);">Enjoy the ease of paying one flat price for beverages over the entire length of your cruise. Now, that's something to cheer about!<br><br></span><span style="font-weight:700;color:rgb(101, 106, 119);">Save up to 10%</span><span style="color:rgb(101, 106, 119);"> when booked prior to sailing</span></p>
                                 </div>
                                 <!--[if mso]>
                              </td>
                           </tr>
                        </table>
                        <![endif]-->
                     </div>
                     <!--[if mso]>
                  </td>
               </tr>
            </table>
            <![endif]-->
            <div class="acr-fragment acr-component divider-container" data-component-id="divider" style="text-align:center;padding-top:30px;padding-bottom:30px;" data-has-int-mso-hack="true" data-contenteditable="false">
               <!--[if mso]>
               <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                     <td style="text-align: center; padding: 30px 0px;" valign="top">
                        <table cellpadding="0" cellspacing="0" border="0" width="500">
                           <tr>
                              <td style="null" >
                                 <![endif]-->
                                 <div style="border-top:1px solid rgb(209, 213, 223);width:500px;display:inline-block;font-size:0px;line-height:0px;height:0px;">&nbsp;</div>
                                 <!--[if mso]>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
               <![endif]-->
            </div>
         </th>
      </tr>
   </tbody>
</table>
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

::::CodeDrawer{title="Email - HTML - Body" isResponseExpanded="false"}
:::CodeblockTabsExamples
```html
<div class="acr-structure" data-structure-id="n-n-column" data-structure-name="richtext.structure_n_n_column" style="background-color:rgb(245, 245, 245);margin:0px auto;max-width:700px;">
<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
   <td style="padding-top: 0px; text-align: center; padding-bottom: 0px;" >
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
   <td style="background-color: rgb(245, 245, 245);" >
      <![endif]-->
      <table class="structure__table" align="center" cellpadding="0" cellspacing="0" border="0" width="700">
<tbody>
   <tr>
      <!--[if mso]>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="" style="mso-hide:">
         <tr>
            <td style="null" >
               <![endif]-->
            <th class="colspan-n is-empty is-mobile-hidden" style="width:10%;border-width:0px;border-style:none;" data-name="Drag a new component here."></th>
            <!--[if mso]></td>
         </tr>
      </table>
      <![endif]-->
      <th class="colspan-n" style="background-color:rgb(255, 255, 255);border-radius:15px;border-width:0px;border-style:none;padding:10px 0px;max-width:38%;">
         <!--[if mso]>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
               <td style="border-radius: 15px;" >
                  <![endif]--><!--[if mso]>
               </td>
            </tr>
         </table>
         <![endif]-->
         <div class="acr-fragment acr-component image-container" data-component-id="image" style="width:100%;text-align:left;margin-bottom:10px;margin-left:5%;margin-right:0px;" data-source-uuid="2f32c5bd-89c7-419a-b467-266ac431f78b" data-contenteditable="false">
            <!--[if mso]>
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
               <tr>
                  <td style="padding-bottom: 10px; text-align: center; padding-left: 5%; padding-right: 0px;" >
                     <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                           <td style="text-align: left; border-radius: 10px;" >
                              <![endif]--><img style="height:auto;border-radius:10px;width:90%;max-width:90%;" width="239" class="" src="https://adbecdn.blob.core.windows.net/stor/msimpson/carnival-uk/soda-package-wknd.png" height="135"><!--[if mso]>
                           </td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>
            <![endif]-->
         </div>
         <!--[if mso]>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
               <td style="padding: 0px 5% 5px;" >
                  <![endif]-->
                  <div class="acr-fragment acr-component" data-component-id="text" style="max-width:90%;margin-bottom:5px;margin-left:5%;margin-right:5%;" data-source-uuid="6df884da-4625-4019-b95e-96becfbcd9b1" data-contenteditable="false">
                     <!--[if mso]>
                     <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                           <td style="null" >
                              <![endif]-->
                              <div class="text-container" data-contenteditable="true">
                                 <p><span style="font-size:14px;font-weight:700;color:rgb(59, 63, 73);">Bottomless Bubbles</span></p>
                              </div>
                              <!--[if mso]>
                           </td>
                        </tr>
                     </table>
                     <![endif]-->
                  </div>
                  <!--[if mso]>
               </td>
            </tr>
         </table>
         <![endif]--><!--[if mso]>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
               <td style="border-radius: 15px; padding: 0px 5% 20px;" >
                  <![endif]-->
                  <div class="acr-fragment acr-component" data-component-id="text" style="margin-bottom:20px;width:90%;margin-left:5%;margin-right:5%;" data-source-uuid="351bd219-5b9e-4cf1-9e00-aaa33810d449" data-contenteditable="false">
                     <!--[if mso]>
                     <table cellpadding="0" cellspacing="0" border="0" width="90%">
                        <tr>
                           <td style="null" >
                              <![endif]-->
                              <div class="text-container" data-contenteditable="true">
                                 <p><span style="font-size:14px;color:rgb(101, 106, 119);">Enjoy ice-cold refreshments during meals, shows, or anytime you want with Bottomless Bubbles.</span></p>
                              </div>
                              <!--[if mso]>
                           </td>
                        </tr>
                     </table>
                     <![endif]-->
                  </div>
                  <!--[if mso]>
               </td>
            </tr>
         </table>
         <![endif]--><!--[if mso]>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
      <td style="padding-left: 0px; border-radius: 15px; padding-right: 0px;" >
         <![endif]-->
         <div class="acr-fragment acr-component" data-component-id="button:2" style="width:100%;text-align:left;margin-left:0px;margin-right:0px;" data-source-uuid="66c375a7-70f4-43c0-95bc-44af0cf2873a" data-has-ext-mso-hack="true" data-has-int-mso-hack="true" data-contenteditable="false">
         <!--[if mso]>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
      <td style="text-align: center; padding-left: 5%;" >
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
      <td style="text-align: center;" >
         <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:21pt; width:84.75pt; v-text-anchor:middle;" arcsize="18%" fillcolor="rgb(25, 121, 195)" strokeweight="0pt" strokecolor="rgb(39, 39, 39)">
         <v:stroke dashstyle="solid" />
         <v:textbox inset="0,0,0,0">
         <center style="color:rgb(255, 255, 255); font-family:"Trebuchet MS"; font-size:14px"><![endif]--><a href="#" class="arc-link" style="text-decoration:none;text-align:center;">
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::