@clay-design-system/email 0.0.0-stage → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -2
- package/dist/build/asset-scoring.d.ts +48 -0
- package/dist/build/asset-scoring.d.ts.map +1 -0
- package/dist/build/asset-scoring.js +58 -0
- package/dist/build/asset-scoring.js.map +1 -0
- package/dist/build/braze-transform.d.ts +20 -0
- package/dist/build/braze-transform.d.ts.map +1 -0
- package/dist/build/braze-transform.js +26 -0
- package/dist/build/braze-transform.js.map +1 -0
- package/dist/build/catalog.d.ts +25 -0
- package/dist/build/catalog.d.ts.map +1 -0
- package/dist/build/catalog.js +3 -0
- package/dist/build/catalog.js.map +1 -0
- package/dist/build/cloudinary-env.d.ts +15 -0
- package/dist/build/cloudinary-env.d.ts.map +1 -0
- package/dist/build/cloudinary-env.js +36 -0
- package/dist/build/cloudinary-env.js.map +1 -0
- package/dist/build/cloudinary-manifest.d.ts +33 -0
- package/dist/build/cloudinary-manifest.d.ts.map +1 -0
- package/dist/build/cloudinary-manifest.js +36 -0
- package/dist/build/cloudinary-manifest.js.map +1 -0
- package/dist/build/compile.d.ts +11 -0
- package/dist/build/compile.d.ts.map +1 -0
- package/dist/build/compile.js +234 -0
- package/dist/build/compile.js.map +1 -0
- package/dist/build/email-config.d.ts +26 -0
- package/dist/build/email-config.d.ts.map +1 -0
- package/dist/build/email-config.js +17 -0
- package/dist/build/email-config.js.map +1 -0
- package/dist/build/email-list.d.ts +6 -0
- package/dist/build/email-list.d.ts.map +1 -0
- package/dist/build/email-list.js +17 -0
- package/dist/build/email-list.js.map +1 -0
- package/dist/build/email-tree.d.ts +23 -0
- package/dist/build/email-tree.d.ts.map +1 -0
- package/dist/build/email-tree.js +46 -0
- package/dist/build/email-tree.js.map +1 -0
- package/dist/build/export-braze.d.ts +22 -0
- package/dist/build/export-braze.d.ts.map +1 -0
- package/dist/build/export-braze.js +92 -0
- package/dist/build/export-braze.js.map +1 -0
- package/dist/build/generate-stock-library-map.d.ts +13 -0
- package/dist/build/generate-stock-library-map.d.ts.map +1 -0
- package/dist/build/generate-stock-library-map.js +202 -0
- package/dist/build/generate-stock-library-map.js.map +1 -0
- package/dist/build/icon-registry-map.d.ts +34 -0
- package/dist/build/icon-registry-map.d.ts.map +1 -0
- package/dist/build/icon-registry-map.js +44 -0
- package/dist/build/icon-registry-map.js.map +1 -0
- package/dist/build/import-examples.d.ts +14 -0
- package/dist/build/import-examples.d.ts.map +1 -0
- package/dist/build/import-examples.js +65 -0
- package/dist/build/import-examples.js.map +1 -0
- package/dist/build/persona-character-map.d.ts +32 -0
- package/dist/build/persona-character-map.d.ts.map +1 -0
- package/dist/build/persona-character-map.js +90 -0
- package/dist/build/persona-character-map.js.map +1 -0
- package/dist/build/stock-library-map.d.ts +57 -0
- package/dist/build/stock-library-map.d.ts.map +1 -0
- package/dist/build/stock-library-map.js +1261 -0
- package/dist/build/stock-library-map.js.map +1 -0
- package/dist/build/upload-assets.d.ts +20 -0
- package/dist/build/upload-assets.d.ts.map +1 -0
- package/dist/build/upload-assets.js +153 -0
- package/dist/build/upload-assets.js.map +1 -0
- package/dist/build/upload-library-assets.d.ts +21 -0
- package/dist/build/upload-library-assets.d.ts.map +1 -0
- package/dist/build/upload-library-assets.js +182 -0
- package/dist/build/upload-library-assets.js.map +1 -0
- package/dist/build/visual-resolver.d.ts +70 -0
- package/dist/build/visual-resolver.d.ts.map +1 -0
- package/dist/build/visual-resolver.js +375 -0
- package/dist/build/visual-resolver.js.map +1 -0
- package/dist/catalog.json +467 -0
- package/dist/emails/component-buttons-icons.html +435 -0
- package/dist/emails/component-buttons-integration.html +256 -0
- package/dist/emails/component-buttons-primary.html +269 -0
- package/dist/emails/component-buttons-secondary.html +255 -0
- package/dist/emails/component-buttons-two-integrations.html +310 -0
- package/dist/emails/component-images-card-280h.html +281 -0
- package/dist/emails/component-images-card-320h.html +281 -0
- package/dist/emails/component-images-card.html +281 -0
- package/dist/emails/component-images-full-bleed-280h.html +279 -0
- package/dist/emails/component-images-full-bleed-400h.html +279 -0
- package/dist/emails/component-images-full-bleed.html +279 -0
- package/dist/emails/component-text-h1.html +254 -0
- package/dist/emails/component-text-h2.html +230 -0
- package/dist/emails/component-text-h3.html +255 -0
- package/dist/emails/component-text-h4.html +255 -0
- package/dist/emails/component-text-h5.html +254 -0
- package/dist/emails/component-text-p2.html +253 -0
- package/dist/emails/component-text-p3.html +254 -0
- package/dist/emails/component-text-p4.html +254 -0
- package/dist/emails/container.html +250 -0
- package/dist/emails/section-changelog-icon-list.html +1201 -0
- package/dist/emails/section-divider-line.html +340 -0
- package/dist/emails/section-feature-highlight-reversed.html +377 -0
- package/dist/emails/section-feature-highlight.html +384 -0
- package/dist/emails/section-feature-rows.html +328 -0
- package/dist/emails/section-feature-story-row-reversed.html +381 -0
- package/dist/emails/section-feature-story-row.html +382 -0
- package/dist/emails/section-footer-lifecycle.html +650 -0
- package/dist/emails/section-footer-two-column-minimal.html +318 -0
- package/dist/emails/section-footer.html +413 -0
- package/dist/emails/section-header.html +290 -0
- package/dist/emails/section-hero.html +276 -0
- package/dist/emails/section-icon-feature-list.html +554 -0
- package/dist/emails/section-image-caption-block.html +313 -0
- package/dist/emails/section-image-hero.html +341 -0
- package/dist/emails/section-lesson-card.html +628 -0
- package/dist/emails/section-list-action-items.html +590 -0
- package/dist/emails/section-list-feature-items.html +713 -0
- package/dist/emails/section-list-icon-items.html +701 -0
- package/dist/emails/section-list-numbered-items.html +733 -0
- package/dist/emails/section-logo-header.html +288 -0
- package/dist/emails/section-newsletter-hero.html +393 -0
- package/dist/emails/section-product-ui-hero.html +496 -0
- package/dist/emails/section-promo-banner.html +308 -0
- package/dist/emails/section-qa-block.html +440 -0
- package/dist/emails/section-resource-link-list.html +481 -0
- package/dist/emails/section-signoff.html +279 -0
- package/dist/emails/section-single-column-author.html +453 -0
- package/dist/emails/section-single-column-feature-card.html +312 -0
- package/dist/emails/section-single-column-product-card.html +393 -0
- package/dist/emails/section-single-column-promo-card.html +306 -0
- package/dist/emails/section-spacer-fill.html +281 -0
- package/dist/emails/section-testimonial-dark-card.html +363 -0
- package/dist/emails/section-text-h1-regular.html +254 -0
- package/dist/emails/section-text-h2-regular.html +254 -0
- package/dist/emails/section-text-h3-regular.html +254 -0
- package/dist/emails/section-text-h4-regular.html +254 -0
- package/dist/emails/section-text-h5-regular.html +254 -0
- package/dist/emails/section-text-mixed-heading.html +269 -0
- package/dist/emails/section-text-overline-heading.html +281 -0
- package/dist/emails/section-text-p1-bold.html +254 -0
- package/dist/emails/section-text-p1-regular.html +255 -0
- package/dist/emails/section-text-paragraph.html +358 -0
- package/dist/emails/section-text-quote-card.html +269 -0
- package/dist/emails/section-text-quote.html +313 -0
- package/dist/emails/section-text-small-headline.html +279 -0
- package/dist/emails/section-three-column-content-cards.html +499 -0
- package/dist/emails/section-three-column-icon-cards.html +510 -0
- package/dist/emails/section-three-column-image-grid.html +466 -0
- package/dist/emails/section-three-up-icon-benefits.html +464 -0
- package/dist/emails/section-two-column-feature-cards.html +708 -0
- package/dist/emails/section-two-column-grid.html +1131 -0
- package/dist/emails/section-two-column-img-text.html +331 -0
- package/dist/emails/section-two-column-live-tags.html +367 -0
- package/dist/emails/section-two-column-stacked.html +629 -0
- package/dist/emails/section-upsell-cta.html +597 -0
- package/dist/emails/section-value-bullet-list.html +313 -0
- package/dist/examples/manifest.d.ts +21 -0
- package/dist/examples/manifest.d.ts.map +1 -0
- package/dist/examples/manifest.js +84 -0
- package/dist/examples/manifest.js.map +1 -0
- package/dist/exports/contact-sales/Images/Contact_sales_Image_16f4175c-d08c-43f6-9d4c-a0606383271d.png +0 -0
- package/dist/exports/contact-sales/Images/Contact_sales_Image_659b3091-1da9-40c2-86b0-04250982e529.png +0 -0
- package/dist/exports/contact-sales/Images/Contact_sales_Image_79c651f4-5f0f-4a7f-8354-1f6f95ae86d9.png +0 -0
- package/dist/exports/contact-sales/index.braze.html +837 -0
- package/dist/exports/contact-sales/index.html +837 -0
- package/dist/exports/event-confirmation/Images/Confirmation_Image_11938de2-4161-4ae8-8969-90ea0d8b45cb.png +0 -0
- package/dist/exports/event-confirmation/Images/Confirmation_Image_3c52e81f-5d4f-452c-bad1-0471a27598f1.png +0 -0
- package/dist/exports/event-confirmation/Images/Confirmation_Image_3ec1fec8-bf46-4068-8835-633567a715f9.png +0 -0
- package/dist/exports/event-confirmation/Images/Confirmation_Image_c4980c01-c270-4384-a56c-0bae74814cf9.png +0 -0
- package/dist/exports/event-confirmation/Images/Confirmation_Image_cde93e8c-0f96-434d-acaf-1b86503c66f0.png +0 -0
- package/dist/exports/event-confirmation/index.braze.html +1055 -0
- package/dist/exports/event-confirmation/index.html +1055 -0
- package/dist/exports/legal-update/Images/v2_Image_07bbcc13-0ab8-46e4-ab94-98f215f85f69.png +0 -0
- package/dist/exports/legal-update/Images/v2_Image_34394d50-acdf-4375-b254-eef1f84aaacb.png +0 -0
- package/dist/exports/legal-update/Images/v2_Image_4a25f2bd-6270-439b-86c5-4a968a1b104f.png +0 -0
- package/dist/exports/legal-update/Images/v2_Image_7e8e814f-3112-4d8c-af5b-4f4616d84d9c.png +0 -0
- package/dist/exports/legal-update/Images/v2_Image_b24a04c8-4af0-42a1-be0f-cd3f66595e47.png +0 -0
- package/dist/exports/legal-update/Images/v2_Image_b709b9fb-836e-4c20-82e5-a9cb9d702392.png +0 -0
- package/dist/exports/legal-update/Images/v2_Image_ed7b924b-35e6-4536-be0c-92ddc8a34fc2.png +0 -0
- package/dist/exports/legal-update/index.braze.html +1731 -0
- package/dist/exports/legal-update/index.html +1731 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_09be22f6-1f30-4c58-bf33-1df0494b8fc2.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_2dfb595e-6fe2-4e6e-a73a-942a085b38ab.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_544c971b-b4b5-4c89-a25a-8f0d92644009.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_5b6a9576-1c33-40c5-81e3-637514fb6c78.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_680c6193-793a-4a24-8288-4bb4046f4f5e.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_75818ba9-026a-45d7-91e4-f992d4ee7690.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_785f18e6-816d-44d1-8efb-ecc82510b540.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_8bf9141d-9d63-4601-9e81-5c9d726e17f8.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_9097d6e0-65d0-4237-9661-963751812786.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_a4ef2f53-2eaf-438a-bfef-61455ac0915e.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_b7748f87-a7b7-4a91-981a-16567683e4b4.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_bc9830a4-2911-4768-808a-32cbbc39215e.png +0 -0
- package/dist/exports/newsletter/Images/Status_update_-_July_26_Image_ef0e8e92-9075-43a9-991f-09a77ef6d6d4.png +0 -0
- package/dist/exports/newsletter/index.braze.html +125 -0
- package/dist/exports/newsletter/index.html +125 -0
- package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-blocks.png +0 -0
- package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-hero-mcp.png +0 -0
- package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-magic.png +0 -0
- package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-mcp.png +0 -0
- package/dist/exports/newsletter-ai-june-july/Images/newsletter-ai-portfolio.png +0 -0
- package/dist/exports/newsletter-ai-june-july/index.braze.html +1640 -0
- package/dist/exports/newsletter-ai-june-july/index.html +1640 -0
- package/dist/exports/survey/Images/EmailLove_Image_3b6f4a6f-7f5f-418b-be71-9371b25c20ce.png +0 -0
- package/dist/exports/survey/Images/EmailLove_Image_f659c728-2401-485d-8d90-98c962d28c0c.png +0 -0
- package/dist/exports/survey/index.braze.html +515 -0
- package/dist/exports/survey/index.html +515 -0
- package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Before_115ccc58-a47f-4eca-a1f2-c0d86e1e1cf4.png +0 -0
- package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Before_aec4d0d3-6057-4b8a-8d8f-46fbd024f182.png +0 -0
- package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Before_d139966a-6051-4383-bf8f-1e5138e1b030.png +0 -0
- package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Image_080fa361-a3f2-4593-9ac0-03cf3a7972ff.png +0 -0
- package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Image_5ebade34-8f1d-4c2c-9d27-5f9e843ce502.png +0 -0
- package/dist/exports/trial-01-welcome/Images/tp1_-_welcome_Image_aa5e4144-9ec8-4525-b01e-077d72f0bab6.png +0 -0
- package/dist/exports/trial-01-welcome/index.braze.html +941 -0
- package/dist/exports/trial-01-welcome/index.html +941 -0
- package/dist/exports/trial-02/Images/tp2_Image_5b0d9bc4-2e38-4252-8f20-d9f27d471c21.png +0 -0
- package/dist/exports/trial-02/Images/tp2_Image_b3f77c7c-cc8e-4db8-a5d9-072f4f621e72.png +0 -0
- package/dist/exports/trial-02/Images/tp2_Image_cafd1a17-1915-47cd-80f2-1c2d0b133cfe.png +0 -0
- package/dist/exports/trial-02/index.braze.html +923 -0
- package/dist/exports/trial-02/index.html +923 -0
- package/dist/exports/trial-03/Images/tp3_Image_1b96630c-fc4d-4aec-91fb-3c1d4d8544b3.png +0 -0
- package/dist/exports/trial-03/Images/tp3_Image_58f3a342-2193-4b5c-b30a-96f7f3338dd8.png +0 -0
- package/dist/exports/trial-03/Images/tp3_Image_6c4f307a-bac2-40e7-b4f1-9aa623c9eb8e.png +0 -0
- package/dist/exports/trial-03/Images/tp3_Image_848917ce-3f89-4538-a826-558b21f5fea7.png +0 -0
- package/dist/exports/trial-03/Images/tp3_Image_aae8410f-556f-4fb9-88f9-f276d75bafd2.png +0 -0
- package/dist/exports/trial-03/Images/tp3_Image_b4d5be39-509e-4f22-9601-dd070e4c6561.png +0 -0
- package/dist/exports/trial-03/index.braze.html +1129 -0
- package/dist/exports/trial-03/index.html +1129 -0
- package/dist/exports/trial-04/Images/tp4_Image_03bd5a56-25e3-4dcc-bef5-143bf12312d5.png +0 -0
- package/dist/exports/trial-04/Images/tp4_Image_0facbfca-b735-4199-a0d9-05a59341a1e3.gif +0 -0
- package/dist/exports/trial-04/Images/tp4_Image_171cee5f-cd3d-42f0-a180-995893d3742a.png +0 -0
- package/dist/exports/trial-04/Images/tp4_Image_3509d89d-1825-4817-8c1e-130fa294d0e1.png +0 -0
- package/dist/exports/trial-04/Images/tp4_Image_763a0f40-2985-4140-859b-ddd34f20a520.png +0 -0
- package/dist/exports/trial-04/Images/tp4_Image_cc2db4f5-b41d-45d7-a798-7a79e7b8d4d8.png +0 -0
- package/dist/exports/trial-04/index.braze.html +885 -0
- package/dist/exports/trial-04/index.html +885 -0
- package/dist/exports/trial-05/Images/tp5_Image_0248a517-5c60-4e84-ad1c-449dcf4f6a64.png +0 -0
- package/dist/exports/trial-05/Images/tp5_Image_4c1a2d5a-47d3-4801-bb3a-01c22decc108.png +0 -0
- package/dist/exports/trial-05/Images/tp5_Image_63ae77e7-cec7-4b4a-91e0-603b5a80929f.png +0 -0
- package/dist/exports/trial-05/Images/tp5_Image_7aa43530-6707-4308-ab0e-e4c38fc1b77d.png +0 -0
- package/dist/exports/trial-05/Images/tp5_Image_7efe5b6d-b360-4179-bee1-72908ba569bc.png +0 -0
- package/dist/exports/trial-05/Images/tp5_Image_b142bd84-c40a-4a29-b9d5-715b52fdd937.png +0 -0
- package/dist/exports/trial-05/Images/tp5_Image_c0c896ea-5b68-4f58-9e27-cdb4a1f1b438.png +0 -0
- package/dist/exports/trial-05/index.braze.html +1023 -0
- package/dist/exports/trial-05/index.html +1023 -0
- package/dist/exports/trial-06/Images/tp6_Image_2267a268-8a80-4e0d-8813-d4c75dbab6f2.png +0 -0
- package/dist/exports/trial-06/Images/tp6_Image_637a97b7-837e-478d-8ed1-6e8c2739fdc7.png +0 -0
- package/dist/exports/trial-06/Images/tp6_Image_a78df270-ad6f-41e6-8822-ba8ec38313a3.png +0 -0
- package/dist/exports/trial-06/index.braze.html +773 -0
- package/dist/exports/trial-06/index.html +773 -0
- package/dist/exports/winback/Images/_managers_Image_4587ac22-460c-487a-bc37-9dbc487e95a4.png +0 -0
- package/dist/exports/winback/Images/_managers_Image_8a77ec2c-ed49-480d-a1a1-7a38abad232a.png +0 -0
- package/dist/exports/winback/Images/_managers_Image_bb643775-8a2f-4e28-9dfb-6d1838c3561f.png +0 -0
- package/dist/exports/winback/Images/_managers_Image_f7d1bca5-0fcb-4d4c-abcd-40ce2d453b07.png +0 -0
- package/dist/exports/winback/index.braze.html +605 -0
- package/dist/exports/winback/index.html +605 -0
- package/dist/generated/email-tokens.d.ts +101 -0
- package/dist/generated/email-tokens.d.ts.map +1 -0
- package/dist/generated/email-tokens.js +104 -0
- package/dist/generated/email-tokens.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/tokens/build-email-assets.d.ts +19 -0
- package/dist/tokens/build-email-assets.d.ts.map +1 -0
- package/dist/tokens/build-email-assets.js +186 -0
- package/dist/tokens/build-email-assets.js.map +1 -0
- package/dist/tokens/build-email-tokens.d.ts +17 -0
- package/dist/tokens/build-email-tokens.d.ts.map +1 -0
- package/dist/tokens/build-email-tokens.js +229 -0
- package/dist/tokens/build-email-tokens.js.map +1 -0
- package/package.json +41 -3
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<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">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Text — Text P3</title>
|
|
5
|
+
<!--[if !mso]><!-->
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<!--<![endif]-->
|
|
8
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
+
<style type="text/css">
|
|
11
|
+
#outlook a { padding:0; }
|
|
12
|
+
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
|
|
13
|
+
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
|
|
14
|
+
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
|
|
15
|
+
p { display:block;margin:13px 0; }
|
|
16
|
+
</style>
|
|
17
|
+
<!--[if mso]>
|
|
18
|
+
<noscript>
|
|
19
|
+
<xml>
|
|
20
|
+
<o:OfficeDocumentSettings>
|
|
21
|
+
<o:AllowPNG/>
|
|
22
|
+
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
23
|
+
</o:OfficeDocumentSettings>
|
|
24
|
+
</xml>
|
|
25
|
+
</noscript>
|
|
26
|
+
<![endif]-->
|
|
27
|
+
<!--[if lte mso 11]>
|
|
28
|
+
<style type="text/css">
|
|
29
|
+
.mj-outlook-group-fix { width:100% !important; }
|
|
30
|
+
</style>
|
|
31
|
+
<![endif]-->
|
|
32
|
+
|
|
33
|
+
<!--[if !mso]><!-->
|
|
34
|
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" type="text/css">
|
|
35
|
+
<style type="text/css">
|
|
36
|
+
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
|
|
37
|
+
</style>
|
|
38
|
+
<!--<![endif]-->
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<style type="text/css">
|
|
43
|
+
@media only screen and (min-width:480px) {
|
|
44
|
+
.mj-column-per-100 { width:100% !important; max-width: 100%; }
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
<style media="screen and (min-width:480px)">
|
|
48
|
+
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
|
|
49
|
+
</style>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<style type="text/css">
|
|
56
|
+
/* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
|
|
57
|
+
img { display: block; }
|
|
58
|
+
.ExternalClass { width: 100%; }
|
|
59
|
+
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
|
|
60
|
+
/* Dark-only images hidden in light mode; swapped in the dark block below. */
|
|
61
|
+
.dl { display: none; }
|
|
62
|
+
|
|
63
|
+
/* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
|
|
64
|
+
@media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
|
|
65
|
+
css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
|
|
66
|
+
size is the inline fallback if style is dropped. Per production emails, only the primary/
|
|
67
|
+
hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
|
|
68
|
+
mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
|
|
69
|
+
@media only screen and (max-width: 479px) {
|
|
70
|
+
.clay-h1 > div { font-size: 48px !important; }
|
|
71
|
+
.clay-h2 > div { font-size: 40px !important; }
|
|
72
|
+
.clay-h3 > div { font-size: 32px !important; }
|
|
73
|
+
.clay-h4 > div { font-size: 24px !important; }
|
|
74
|
+
|
|
75
|
+
/* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
|
|
76
|
+
the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
|
|
77
|
+
Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
|
|
78
|
+
Targets the outer td MJML generates with inline padding-left/padding-right. */
|
|
79
|
+
.email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
|
|
80
|
+
.email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
|
|
81
|
+
.email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
|
|
82
|
+
.email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
|
|
83
|
+
|
|
84
|
+
/* Mobile text centering — apply as css-class on mj-text elements whose content should be
|
|
85
|
+
center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
|
|
86
|
+
Targets the inner div MJML wraps text content in. */
|
|
87
|
+
.email-mobile-center > div { text-align: center !important; }
|
|
88
|
+
|
|
89
|
+
/* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
|
|
90
|
+
text-align on the td does not reposition its block-level child table (CSS text-align
|
|
91
|
+
only affects inline content), so the nested image-wrapper table also needs margin:auto
|
|
92
|
+
to actually override the mj-image align="left"/"right" attribute on mobile. */
|
|
93
|
+
.email-mobile-center-img { text-align: center !important; }
|
|
94
|
+
.email-mobile-center-img > table { margin: 0 auto !important; }
|
|
95
|
+
|
|
96
|
+
/* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
|
|
97
|
+
Makes the button's inner table fill the column width and centers it.
|
|
98
|
+
Matches emaillove .mj-b-full pattern. */
|
|
99
|
+
.email-btn-full > table { width: 100% !important; }
|
|
100
|
+
.email-btn-full > table > tbody > tr > td { text-align: center !important; }
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
|
|
104
|
+
Overrides MJML's default text-align:center on the inner td and anchor so
|
|
105
|
+
icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
|
|
106
|
+
.email-btn-left > table > tbody > tr > td { text-align: left !important; }
|
|
107
|
+
.email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
|
|
108
|
+
|
|
109
|
+
/* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
|
|
110
|
+
fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
|
|
111
|
+
image; Outlook and other non-supporting clients silently ignore the transform and show the
|
|
112
|
+
image unrotated — safe graceful degradation, never a broken layout. */
|
|
113
|
+
.email-tilt-1 { transform: rotate(-6deg); }
|
|
114
|
+
.email-tilt-2 { transform: rotate(4deg); }
|
|
115
|
+
.email-tilt-3 { transform: rotate(-4deg); }
|
|
116
|
+
.email-tilt-4 { transform: rotate(6deg); }
|
|
117
|
+
|
|
118
|
+
:root { color-scheme: light dark; supported-color-schemes: light dark; }
|
|
119
|
+
@media (prefers-color-scheme: dark) {
|
|
120
|
+
body, .email-page { background-color: #000000 !important; }
|
|
121
|
+
/*
|
|
122
|
+
* email-card: flip a section or column's background to dark.
|
|
123
|
+
*
|
|
124
|
+
* Three selectors cover every compiled MJML structure:
|
|
125
|
+
* 1. .email-card — the outer div (mj-section or mj-column)
|
|
126
|
+
* 2. .email-card > table — the direct child table (mj-section has inline bg here)
|
|
127
|
+
* 3. .email-card > table > tbody > tr > td
|
|
128
|
+
* — the content td inside mj-column (carries inline bg-color
|
|
129
|
+
* + border-radius when background-color is set on mj-column)
|
|
130
|
+
*
|
|
131
|
+
* Apply css-class="email-card" to any mj-section or mj-column that should
|
|
132
|
+
* become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
|
|
133
|
+
*/
|
|
134
|
+
.email-card,
|
|
135
|
+
.email-card > table,
|
|
136
|
+
.email-card > table > tbody > tr > td { background-color: #252526 !important; }
|
|
137
|
+
.email-text, .email-text * { color: #ffffff !important; }
|
|
138
|
+
.ll { display: none !important; }
|
|
139
|
+
.dl { display: block !important; }
|
|
140
|
+
/* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
|
|
141
|
+
mj-button to white background + black text in dark mode. Matches emaillove global
|
|
142
|
+
.mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
|
|
143
|
+
.email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
|
|
144
|
+
.email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
|
|
145
|
+
}
|
|
146
|
+
/* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
|
|
147
|
+
prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
|
|
148
|
+
[data-ogsb] body, [data-ogsb] .email-page { background-color: #000000 !important; }
|
|
149
|
+
[data-ogsb] .email-card,
|
|
150
|
+
[data-ogsb] .email-card > table,
|
|
151
|
+
[data-ogsb] .email-card > table > tbody > tr > td { background-color: #252526 !important; }
|
|
152
|
+
[data-ogsc] .email-text, [data-ogsc] .email-text * { color: #ffffff !important; }
|
|
153
|
+
</style>
|
|
154
|
+
<!-- GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`. -->
|
|
155
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
156
|
+
<meta name="x-apple-disable-message-reformatting" />
|
|
157
|
+
<meta name="color-scheme" content="light dark" />
|
|
158
|
+
<meta name="supported-color-schemes" content="light dark" />
|
|
159
|
+
</head>
|
|
160
|
+
<body style="word-spacing:normal;background-color:#f3f4f5;">
|
|
161
|
+
|
|
162
|
+
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Section preview — Text P3</div>
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
<div
|
|
166
|
+
aria-label="Text — Text P3" aria-roledescription="email" style="background-color:#f3f4f5;" role="article" lang="und" dir="auto"
|
|
167
|
+
>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
<!--[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]-->
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
<div class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
|
|
174
|
+
|
|
175
|
+
<table
|
|
176
|
+
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
|
|
177
|
+
>
|
|
178
|
+
<tbody>
|
|
179
|
+
<tr>
|
|
180
|
+
<td
|
|
181
|
+
style="direction:ltr;font-size:0px;padding:0;text-align:center;"
|
|
182
|
+
>
|
|
183
|
+
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
|
|
184
|
+
|
|
185
|
+
<!-- text-p3 — caption/helper text (14px/400, left, muted #45454a). Use for footnotes, helper copy.
|
|
186
|
+
For eyebrow use (above a heading), see text-overline-heading.
|
|
187
|
+
Mobile: H-padding → 24px (email-mobile-px-24). -->
|
|
188
|
+
<!--[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]-->
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
<div class="email-mobile-px-24" style="margin:0px auto;max-width:640px;">
|
|
192
|
+
|
|
193
|
+
<table
|
|
194
|
+
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
|
|
195
|
+
>
|
|
196
|
+
<tbody>
|
|
197
|
+
<tr>
|
|
198
|
+
<td
|
|
199
|
+
style="direction:ltr;font-size:0px;padding:24px 40px;text-align:center;"
|
|
200
|
+
>
|
|
201
|
+
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
|
|
202
|
+
|
|
203
|
+
<div
|
|
204
|
+
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
|
|
205
|
+
>
|
|
206
|
+
|
|
207
|
+
<table
|
|
208
|
+
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
|
|
209
|
+
>
|
|
210
|
+
<tbody>
|
|
211
|
+
|
|
212
|
+
<tr>
|
|
213
|
+
<td
|
|
214
|
+
align="left" class="email-text" style="font-size:0px;padding:0;word-break:break-word;"
|
|
215
|
+
>
|
|
216
|
+
|
|
217
|
+
<div
|
|
218
|
+
style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:left;color:#45454a;"
|
|
219
|
+
>Most teams lose time and clarity jumping between apps just to get work done. With monday work management, you can connect the tools you already use — into one collaborative workspace.</div>
|
|
220
|
+
|
|
221
|
+
</td>
|
|
222
|
+
</tr>
|
|
223
|
+
|
|
224
|
+
</tbody>
|
|
225
|
+
</table>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
230
|
+
</td>
|
|
231
|
+
</tr>
|
|
232
|
+
</tbody>
|
|
233
|
+
</table>
|
|
234
|
+
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
</tbody>
|
|
242
|
+
</table>
|
|
243
|
+
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
</body>
|
|
253
|
+
</html>
|
|
254
|
+
|
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<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">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Text — Text P4</title>
|
|
5
|
+
<!--[if !mso]><!-->
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<!--<![endif]-->
|
|
8
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
+
<style type="text/css">
|
|
11
|
+
#outlook a { padding:0; }
|
|
12
|
+
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
|
|
13
|
+
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
|
|
14
|
+
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
|
|
15
|
+
p { display:block;margin:13px 0; }
|
|
16
|
+
</style>
|
|
17
|
+
<!--[if mso]>
|
|
18
|
+
<noscript>
|
|
19
|
+
<xml>
|
|
20
|
+
<o:OfficeDocumentSettings>
|
|
21
|
+
<o:AllowPNG/>
|
|
22
|
+
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
23
|
+
</o:OfficeDocumentSettings>
|
|
24
|
+
</xml>
|
|
25
|
+
</noscript>
|
|
26
|
+
<![endif]-->
|
|
27
|
+
<!--[if lte mso 11]>
|
|
28
|
+
<style type="text/css">
|
|
29
|
+
.mj-outlook-group-fix { width:100% !important; }
|
|
30
|
+
</style>
|
|
31
|
+
<![endif]-->
|
|
32
|
+
|
|
33
|
+
<!--[if !mso]><!-->
|
|
34
|
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" type="text/css">
|
|
35
|
+
<style type="text/css">
|
|
36
|
+
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
|
|
37
|
+
</style>
|
|
38
|
+
<!--<![endif]-->
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<style type="text/css">
|
|
43
|
+
@media only screen and (min-width:480px) {
|
|
44
|
+
.mj-column-per-100 { width:100% !important; max-width: 100%; }
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
<style media="screen and (min-width:480px)">
|
|
48
|
+
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
|
|
49
|
+
</style>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<style type="text/css">
|
|
56
|
+
/* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
|
|
57
|
+
img { display: block; }
|
|
58
|
+
.ExternalClass { width: 100%; }
|
|
59
|
+
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
|
|
60
|
+
/* Dark-only images hidden in light mode; swapped in the dark block below. */
|
|
61
|
+
.dl { display: none; }
|
|
62
|
+
|
|
63
|
+
/* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
|
|
64
|
+
@media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
|
|
65
|
+
css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
|
|
66
|
+
size is the inline fallback if style is dropped. Per production emails, only the primary/
|
|
67
|
+
hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
|
|
68
|
+
mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
|
|
69
|
+
@media only screen and (max-width: 479px) {
|
|
70
|
+
.clay-h1 > div { font-size: 48px !important; }
|
|
71
|
+
.clay-h2 > div { font-size: 40px !important; }
|
|
72
|
+
.clay-h3 > div { font-size: 32px !important; }
|
|
73
|
+
.clay-h4 > div { font-size: 24px !important; }
|
|
74
|
+
|
|
75
|
+
/* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
|
|
76
|
+
the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
|
|
77
|
+
Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
|
|
78
|
+
Targets the outer td MJML generates with inline padding-left/padding-right. */
|
|
79
|
+
.email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
|
|
80
|
+
.email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
|
|
81
|
+
.email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
|
|
82
|
+
.email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
|
|
83
|
+
|
|
84
|
+
/* Mobile text centering — apply as css-class on mj-text elements whose content should be
|
|
85
|
+
center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
|
|
86
|
+
Targets the inner div MJML wraps text content in. */
|
|
87
|
+
.email-mobile-center > div { text-align: center !important; }
|
|
88
|
+
|
|
89
|
+
/* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
|
|
90
|
+
text-align on the td does not reposition its block-level child table (CSS text-align
|
|
91
|
+
only affects inline content), so the nested image-wrapper table also needs margin:auto
|
|
92
|
+
to actually override the mj-image align="left"/"right" attribute on mobile. */
|
|
93
|
+
.email-mobile-center-img { text-align: center !important; }
|
|
94
|
+
.email-mobile-center-img > table { margin: 0 auto !important; }
|
|
95
|
+
|
|
96
|
+
/* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
|
|
97
|
+
Makes the button's inner table fill the column width and centers it.
|
|
98
|
+
Matches emaillove .mj-b-full pattern. */
|
|
99
|
+
.email-btn-full > table { width: 100% !important; }
|
|
100
|
+
.email-btn-full > table > tbody > tr > td { text-align: center !important; }
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
|
|
104
|
+
Overrides MJML's default text-align:center on the inner td and anchor so
|
|
105
|
+
icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
|
|
106
|
+
.email-btn-left > table > tbody > tr > td { text-align: left !important; }
|
|
107
|
+
.email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
|
|
108
|
+
|
|
109
|
+
/* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
|
|
110
|
+
fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
|
|
111
|
+
image; Outlook and other non-supporting clients silently ignore the transform and show the
|
|
112
|
+
image unrotated — safe graceful degradation, never a broken layout. */
|
|
113
|
+
.email-tilt-1 { transform: rotate(-6deg); }
|
|
114
|
+
.email-tilt-2 { transform: rotate(4deg); }
|
|
115
|
+
.email-tilt-3 { transform: rotate(-4deg); }
|
|
116
|
+
.email-tilt-4 { transform: rotate(6deg); }
|
|
117
|
+
|
|
118
|
+
:root { color-scheme: light dark; supported-color-schemes: light dark; }
|
|
119
|
+
@media (prefers-color-scheme: dark) {
|
|
120
|
+
body, .email-page { background-color: #000000 !important; }
|
|
121
|
+
/*
|
|
122
|
+
* email-card: flip a section or column's background to dark.
|
|
123
|
+
*
|
|
124
|
+
* Three selectors cover every compiled MJML structure:
|
|
125
|
+
* 1. .email-card — the outer div (mj-section or mj-column)
|
|
126
|
+
* 2. .email-card > table — the direct child table (mj-section has inline bg here)
|
|
127
|
+
* 3. .email-card > table > tbody > tr > td
|
|
128
|
+
* — the content td inside mj-column (carries inline bg-color
|
|
129
|
+
* + border-radius when background-color is set on mj-column)
|
|
130
|
+
*
|
|
131
|
+
* Apply css-class="email-card" to any mj-section or mj-column that should
|
|
132
|
+
* become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
|
|
133
|
+
*/
|
|
134
|
+
.email-card,
|
|
135
|
+
.email-card > table,
|
|
136
|
+
.email-card > table > tbody > tr > td { background-color: #252526 !important; }
|
|
137
|
+
.email-text, .email-text * { color: #ffffff !important; }
|
|
138
|
+
.ll { display: none !important; }
|
|
139
|
+
.dl { display: block !important; }
|
|
140
|
+
/* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
|
|
141
|
+
mj-button to white background + black text in dark mode. Matches emaillove global
|
|
142
|
+
.mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
|
|
143
|
+
.email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
|
|
144
|
+
.email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
|
|
145
|
+
}
|
|
146
|
+
/* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
|
|
147
|
+
prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
|
|
148
|
+
[data-ogsb] body, [data-ogsb] .email-page { background-color: #000000 !important; }
|
|
149
|
+
[data-ogsb] .email-card,
|
|
150
|
+
[data-ogsb] .email-card > table,
|
|
151
|
+
[data-ogsb] .email-card > table > tbody > tr > td { background-color: #252526 !important; }
|
|
152
|
+
[data-ogsc] .email-text, [data-ogsc] .email-text * { color: #ffffff !important; }
|
|
153
|
+
</style>
|
|
154
|
+
<!-- GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`. -->
|
|
155
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
156
|
+
<meta name="x-apple-disable-message-reformatting" />
|
|
157
|
+
<meta name="color-scheme" content="light dark" />
|
|
158
|
+
<meta name="supported-color-schemes" content="light dark" />
|
|
159
|
+
</head>
|
|
160
|
+
<body style="word-spacing:normal;background-color:#f3f4f5;">
|
|
161
|
+
|
|
162
|
+
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Section preview — Text P4</div>
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
<div
|
|
166
|
+
aria-label="Text — Text P4" aria-roledescription="email" style="background-color:#f3f4f5;" role="article" lang="und" dir="auto"
|
|
167
|
+
>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
<!--[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]-->
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
<div class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
|
|
174
|
+
|
|
175
|
+
<table
|
|
176
|
+
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
|
|
177
|
+
>
|
|
178
|
+
<tbody>
|
|
179
|
+
<tr>
|
|
180
|
+
<td
|
|
181
|
+
style="direction:ltr;font-size:0px;padding:0;text-align:center;"
|
|
182
|
+
>
|
|
183
|
+
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
|
|
184
|
+
|
|
185
|
+
<!-- text-p4 — fine print / legal / micro copy (12px/400, left, muted #45454a).
|
|
186
|
+
For text inside a warm beige card, see text-quote-card.
|
|
187
|
+
Mobile: H-padding → 24px (email-mobile-px-24). -->
|
|
188
|
+
<!--[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]-->
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
<div class="email-mobile-px-24" style="margin:0px auto;max-width:640px;">
|
|
192
|
+
|
|
193
|
+
<table
|
|
194
|
+
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
|
|
195
|
+
>
|
|
196
|
+
<tbody>
|
|
197
|
+
<tr>
|
|
198
|
+
<td
|
|
199
|
+
style="direction:ltr;font-size:0px;padding:24px 40px;text-align:center;"
|
|
200
|
+
>
|
|
201
|
+
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
|
|
202
|
+
|
|
203
|
+
<div
|
|
204
|
+
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
|
|
205
|
+
>
|
|
206
|
+
|
|
207
|
+
<table
|
|
208
|
+
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
|
|
209
|
+
>
|
|
210
|
+
<tbody>
|
|
211
|
+
|
|
212
|
+
<tr>
|
|
213
|
+
<td
|
|
214
|
+
align="left" class="email-text" style="font-size:0px;padding:0;word-break:break-word;"
|
|
215
|
+
>
|
|
216
|
+
|
|
217
|
+
<div
|
|
218
|
+
style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;font-weight:400;line-height:1.5;text-align:left;color:#45454a;"
|
|
219
|
+
>Most teams lose time and clarity jumping between apps just to get work done. With monday work management, you can connect the tools you already use — into one collaborative workspace.</div>
|
|
220
|
+
|
|
221
|
+
</td>
|
|
222
|
+
</tr>
|
|
223
|
+
|
|
224
|
+
</tbody>
|
|
225
|
+
</table>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
230
|
+
</td>
|
|
231
|
+
</tr>
|
|
232
|
+
</tbody>
|
|
233
|
+
</table>
|
|
234
|
+
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
</tbody>
|
|
242
|
+
</table>
|
|
243
|
+
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
</body>
|
|
253
|
+
</html>
|
|
254
|
+
|