@clay-design-system/email 0.0.0-stage → 0.2.1

package/dist/emails/section-feature-highlight.html

@@ -0,0 +1,384 @@
+<!doctype html>
+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+  <head>
+    <title>Feature Highlight — Text Left, Image Right</title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type="text/css">
+      #outlook a { padding:0; }
+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
+      p { display:block;margin:13px 0; }
+    </style>
+    <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+    <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+    
+      <!--[if !mso]><!-->
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" type="text/css">
+        <style type="text/css">
+          @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
+        </style>
+      <!--<![endif]-->
+
+    
+    
+    <style type="text/css">
+      @media only screen and (min-width:480px) {
+        .mj-column-per-50 { width:50% !important; max-width: 50%; }
+      }
+    </style>
+    <style media="screen and (min-width:480px)">
+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }
+    </style>
+    
+    
+  
+    
+    <style type="text/css">
+
+    @media only screen and (max-width:479px) {
+      table.mj-full-width-mobile { width: 100% !important; }
+      td.mj-full-width-mobile { width: auto !important; }
+    }
+  
+    </style>
+     
+    <style type="text/css">
+/* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
+  img { display: block; }
+  .ExternalClass { width: 100%; }
+  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
+  /* Dark-only images hidden in light mode; swapped in the dark block below. */
+  .dl { display: none; }
+
+  /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
+     @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
+     hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
+     mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
+  @media only screen and (max-width: 479px) {
+    .clay-h1 > div { font-size: 48px !important; }
+    .clay-h2 > div { font-size: 40px !important; }
+    .clay-h3 > div { font-size: 32px !important; }
+    .clay-h4 > div { font-size: 24px !important; }
+
+    /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
+       Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
+       Targets the outer td MJML generates with inline padding-left/padding-right. */
+    .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
+    .email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
+    .email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
+    .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
+
+    /* Mobile text centering — apply as css-class on mj-text elements whose content should be
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
+    .email-mobile-center > div { text-align: center !important; }
+
+    /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
+       text-align on the td does not reposition its block-level child table (CSS text-align
+       only affects inline content), so the nested image-wrapper table also needs margin:auto
+       to actually override the mj-image align="left"/"right" attribute on mobile. */
+    .email-mobile-center-img { text-align: center !important; }
+    .email-mobile-center-img > table { margin: 0 auto !important; }
+
+    /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
+       Makes the button's inner table fill the column width and centers it.
+       Matches emaillove .mj-b-full pattern. */
+    .email-btn-full > table { width: 100% !important; }
+    .email-btn-full > table > tbody > tr > td { text-align: center !important; }
+  }
+
+  /* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
+     Overrides MJML's default text-align:center on the inner td and anchor so
+     icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
+  .email-btn-left > table > tbody > tr > td { text-align: left !important; }
+  .email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
+
+  /* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
+     fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
+     image; Outlook and other non-supporting clients silently ignore the transform and show the
+     image unrotated — safe graceful degradation, never a broken layout. */
+  .email-tilt-1 { transform: rotate(-6deg); }
+  .email-tilt-2 { transform: rotate(4deg); }
+  .email-tilt-3 { transform: rotate(-4deg); }
+  .email-tilt-4 { transform: rotate(6deg); }
+
+  :root { color-scheme: light dark; supported-color-schemes: light dark; }
+  @media (prefers-color-scheme: dark) {
+    body, .email-page { background-color: #000000 !important; }
+    /*
+     * email-card: flip a section or column's background to dark.
+     *
+     * Three selectors cover every compiled MJML structure:
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
+     *   3. .email-card > table > tbody > tr > td
+     *                           — the content td inside mj-column (carries inline bg-color
+     *                             + border-radius when background-color is set on mj-column)
+     *
+     * Apply css-class="email-card" to any mj-section or mj-column that should
+     * become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
+     */
+    .email-card,
+    .email-card > table,
+    .email-card > table > tbody > tr > td { background-color: #252526 !important; }
+    .email-text, .email-text * { color: #ffffff !important; }
+    .ll { display: none !important; }
+    .dl { display: block !important; }
+    /* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
+       mj-button to white background + black text in dark mode. Matches emaillove global
+       .mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
+    .email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
+    .email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
+  }
+  /* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
+     prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
+  [data-ogsb] body, [data-ogsb] .email-page { background-color: #000000 !important; }
+  [data-ogsb] .email-card,
+  [data-ogsb] .email-card > table,
+  [data-ogsb] .email-card > table > tbody > tr > td { background-color: #252526 !important; }
+  [data-ogsc] .email-text, [data-ogsc] .email-text * { color: #ffffff !important; }
+    </style>
+    <!-- GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`. -->
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="x-apple-disable-message-reformatting" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="supported-color-schemes" content="light dark" />
+  </head>
+  <body style="word-spacing:normal;background-color:#f3f4f5;">
+    
+    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Section preview — Feature Highlight</div>
+  
+    
+      <div
+         aria-label="Feature Highlight — Text Left, Image Right" aria-roledescription="email" style="background-color:#f3f4f5;" role="article" lang="und" dir="auto"
+      >
+        
+      
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-card-outlook" 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  class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
+        
+        <table
+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;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"><![endif]-->
+                  
+      <!-- feature-highlight — 50/50 feature card: label badge + headline + body + black pill CTA (left)
+     and a fixed-height product image (right). Use with feature-highlight-reversed to create an
+     alternating layout rhythm across a feature list.
+     Column widths: 50% each = 280px (inside 560px content area, 40px H-padding).
+     Image column is vertically centred; text column is top-aligned with 26px V-padding.
+     Use consistently-sized product images (recommended: 280×240px) across all instances
+     so image column heights match and the layout stays balanced. -->
+          <!--[if mso | IE]><tr><td class="email-mobile-px-24-outlook" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-mobile-px-24-outlook" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div  class="email-mobile-px-24" 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:16px 40px;text-align:center;"
+              >
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:280px;" ><![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:26px 20px;">
+              
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
+      >
+        <tbody>
+          <!-- Label badge — replace background-color and text per feature category.
+         Yellow #E5FF00 = AI/product feature. display:inline-block unsupported in Outlook
+         Word engine — renders as plain text in MSO; acceptable for a non-navigable label. -->
+              <tr>
+                <td
+                   align="left" style="font-size:0px;padding:0 0 24px;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:10px;line-height:1.6;text-align:left;color:#252526;"
+      ><a href="#" style="display:inline-block;background-color:#E5FF00;color:#000000;font-size:10px;font-weight:400;line-height:1.6;padding:4px 16px;border-radius:4px;text-decoration:none;mso-padding-alt:4px 16px;">Feature label</a></div>
+    
+                </td>
+              </tr>
+            <!-- Feature headline — clay-p3 size (14px) at semi-bold weight -->
+              <tr>
+                <td
+                   align="left" class="email-text" style="font-size:0px;padding:0 0 12px;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:600;line-height:1.5;text-align:left;color:#000000;"
+      >Feature headline goes here</div>
+    
+                </td>
+              </tr>
+            <!-- Feature body copy — 14px regular, black (clay-p3 defaults to muted; overridden here) -->
+              <tr>
+                <td
+                   align="left" class="email-text" style="font-size:0px;padding:0;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:left;color:#000000;"
+      >Describe the feature in 2–3 sentences. Keep it short, benefit-led, and scannable for email reading.</div>
+    
+                </td>
+              </tr>
+            <!-- Black pill CTA — inverts to white bg + black text in dark mode (email-btn-invert-dark) -->
+              <tr>
+                <td
+                   align="left" class="email-btn-invert-dark" style="font-size:0px;padding:24px 0 0;word-break:break-word;"
+                >
+                  
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
+      >
+        <tbody>
+          <tr>
+            <td
+               align="center" bgcolor="#000000" role="presentation" style="border:none;border-radius:9999px;cursor:auto;mso-padding-alt:12px 24px;background:#000000;" valign="middle"
+            >
+              <a
+                 href="https://monday.com" style="display:inline-block;background:#000000;color:#ffffff;font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:12px 24px;mso-padding-alt:0px;border-radius:9999px;" target="_blank"
+              >
+                Check it out &gt;
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td><td class="" style="vertical-align:middle;width:280px;" ><![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:middle;width:100%;"
+      >
+        
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse:separate;"
+      >
+        <tbody>
+          <tr>
+            <td  style="border-radius:8px;vertical-align:middle;border-collapse:separate;padding:0;">
+              
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
+      >
+        <tbody>
+          <!-- Product image — replace with 280×240px artwork; keep dimensions consistent across
+         all feature-highlight rows so section heights match. fluid-on-mobile fills full
+         column width when columns stack on narrow viewports. -->
+              <tr>
+                <td
+                   align="center" style="font-size:0px;padding:0;word-break:break-word;"
+                >
+                  
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" class="mj-full-width-mobile"
+      >
+        <tbody>
+          <tr>
+            <td  style="width:280px;" class="mj-full-width-mobile">
+              
+      <img
+         alt="" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyODAnIGhlaWdodD0nMjQwJz48cmVjdCB3aWR0aD0nMjgwJyBoZWlnaHQ9JzI0MCcgcng9JzgnIGZpbGw9JyNlNmU3ZWEnLz48L3N2Zz4=" style="border:0;border-radius:8px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="280" height="auto"
+      />
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </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]-->
+    
+    
+      </div>
+    
+  </body>
+</html>
+