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

package/dist/emails/section-single-column-feature-card.html

@@ -0,0 +1,312 @@
+<!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>Single column — Feature card</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-100 { width:100% !important; max-width: 100%; }
+      }
+    </style>
+    <style media="screen and (min-width:480px)">
+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
+    </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 — Single column feature card</div>
+  
+    
+      <div
+         aria-label="Single column — Feature card" 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]-->
+                  
+      <!-- single-column-feature-card — grey rounded card with centered icon + heading + body.
+     Source: emaillove "Single colomn" export / Figma "Single Column" node 1:685.
+     Grey card (#F3F4F5 = emailColor.page, radius 16px = emailLayout.cardRadius), 16px inner padding.
+     44px centered icon image, centered clay-h5 heading, centered clay-p1 body.
+     Mobile: H-padding → 24px (email-mobile-px-24). -->
+          <!--[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:24px 40px;text-align:center;"
+              >
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="email-card-outlook" style="vertical-align:top;width:560px;" ><![endif]-->
+            
+      <div
+         class="mj-column-per-100 mj-outlook-group-fix email-card" 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%" style="border-collapse:separate;"
+      >
+        <tbody>
+          <tr>
+            <td  style="background-color:#F3F4F5;border-radius:16px;vertical-align:top;border-collapse:separate;padding:16px;">
+              
+      <table
+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
+      >
+        <tbody>
+          
+              <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;"
+      >
+        <tbody>
+          <tr>
+            <td  style="width:44px;">
+              
+      <img
+         alt="Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAA/lJREFUeAHtnItO4zAQRd1S3hIgEF/L/jGiL/p+bq4hu92lTeOxr2s3c6RKiFhtc2pPZmwnrV9vb1uj0GgbhYoKJqOCyahgMiqYjAomo4LJqGAyKpiMCiajgsmoYDIqmIwKJqOCyXSMJ51Ox9zf35vr62vTubgwptUyWbPdmtV6bRaLhRmPx2a5XBofxIJbhcjHx0dzd3dnzorivNBp8MK5QfJwOCy8y9YlRCECcp+fn89P7h4wOnGuLeHIFAl+eHiwIaEp4FwxWiU4C768vLS/atPAaEXYcMVZcBPllkjO3Vnw1dWVaSqSsOgs2KZiDeVCcO7uQaXm1RRpDVKc6XRqVqvV14cVMez29tYOtVaG+bLkO3sXGvtYF4n6x8fHH7ElSNrxmkwm5uXlRdQjciN4qYyeu0/uLjiGNtLkPSeCC0ZYqJJbgjZoe+4EF4yYy2ibK8EF1+m9kra5otOVZIILdiknJaVnbgQXjDy3Lk2YjQsuGEVEnZ5ZzreeO8EFo9pBEVElGcfQJsdqzhVKEESF9vr6ais2vM6lVJZAu8pAIEQypzdRCQ4GAzObzezfCDlYDEjpx8v6Mg65GCElqAwh+unpyaRCtnnwvOi1u3JL8D/06FTIUvBmszH9ovceAj0bbVIgS8EQiCnRQ+AYltpTIDvBmCCqM0lkQ0UCk0lZCUbPHDj0zP6Rnh6DrATb2OogDHF40O+bU5KNYGl2MJvP92YbschCsA0NFVnDMXDBO1WoyEJwr9fzWr+zad2JQkXyglGdYSupL/MiVJxiDTB6qewyfxA6n8V72X3MESf6o/dgDFVcdDBsy80pe4dvccw3NPx8y6/3NBG3C0QVPBqN9hYJ+B+O/dM2UGj4H2x8GUUMFdEEIwZ+fn4ePI5jaAMgoaqtL3jvWCvaUQQjlvaKMFA13MvhixPvH2nrS8xQQReMk+l2u7UqMMTl9/d37xtP6oDPGBJHSQldMHqji7CY+9XGpDi/C1XwoYtaKuDHZIcjmuBjF7VUQMxnfk+K4DoXtZRghgrK/uC6F7VU2BKKmpLgglGOxsgCQuM7Y3eI4IJPOffqC2M1mrJ1SvlLcME3NzcmV1x2htYl+Lwd7ulFL0aoyCWLaLfbtmNg2jQ07oIhrSIMlI85kN48nTKSDuMcIlYZpV+hkazrOQtefE8pNhFJMeIseJRxGuaLZE3PPUR83wrbNKTP7xGlaah45gltEWWDc5UuvooE2/mGonZvwq2wGK1dj3kKcR5cLr/jC+A2ATyo42we61WsrKDX1r3vugrvQgNxqX/iDXYpo7fSklHBZFQwGRVMRgWTUcFkVDAZFUxGBZNRwWRUMBkVTEYFk1HBZFQwmd8rCFAM/gooAQAAAABJRU5ErkJggg==" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="44" height="auto"
+      />
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td
+                   align="center" class="email-text" style="font-size:0px;padding:0;padding-top:8px;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;font-weight:600;line-height:1.3;text-align:center;color:#000000;"
+      >Shareable boards</div>
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td
+                   align="center" class="email-text" style="font-size:0px;padding:0;padding-top:8px;word-break:break-word;"
+                >
+                  
+      <div
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.4;text-align:center;color:#000000;"
+      >Lets you collaborate with specific external stakeholders (like customers, freelancers, etc.) on specified boards</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]-->
+    
+    
+      </div>
+    
+  </body>
+</html>
+