Documentation / Newsletter
Newsletter layouts
Layouts for Newsletter - Kyrios ChMS
We provide a set of layouts that you can copy and use when preparing your newsletters.
News
You can use this layout to disseminate news or other types of content.
<!--[if !IE] <html http-equiv="X-UA-Compatible" content="IE=edge" / <!--<![endif]-- <meta name="viewport" content="width=device-width" / <style type="text/css" @media only screen and (min-width: 620px){.wrapper{min-width:600px !important}.wrapper h1{}.wrapper h1{font-size:64px !important;line-height:63px !important}.wrapper h2{}.wrapper h2{font-size:30px !important;line-height:38px !important}.wrapper h3{}.wrapper h3{font-size:22px !important;line-height:31px !important}.column{}.wrapper .size-8{font-size:8px !important;line-height:14px !important}.wrapper .size-9{font-size:9px !important;line-height:16px !important}.wrapper .size-10{font-size:10px !important;line-height:18px !important}.wrapper .size-11{font-size:11px !important;line-height:19px !important}.wrapper .size-12{font-size:12px !important;line-height:19px !important}.wrapper .size-13{font-size:13px !important;line-height:21px !important}.wrapper .size-14{font-size:14px !important;line-height:21px !important}.wrapper .size-15{font-size:15px !important;line-height:23px !important}.wrapper .size-16{font-size:16px !important;line-height:24px !important}.wrapper .size-17{font-size:17px !important;line-height:26px !important}.wrapper .size-18{font-size:18px !important;line-height:26px !important}.wrapper .size-20{font-size:20px !important;line-height:28px !important}.wrapper .size-22{font-size:22px !important;line-height:31px !important}.wrapper .size-24{font-size:24px !important;line-height:32px !important}.wrapper .size-26{font-size:26px !important;line-height:34px !important}.wrapper .size-28{font-size:28px !important;line-height:36px !important}.wrapper .size-30{font-size:30px !important;line-height:38px !important}.wrapper .size-32{font-size:32px !important;line-height:40px !important}.wrapper .size-34{font-size:34px !important;line-height:43px !important}.wrapper .size-36{font-size:36px !important;line-height:43px !important}.wrapper .size-40{font-size:40px !important;line-height:47px !important}.wrapper .size-44{font-size:44px !important;line-height:50px !important}.wrapper .size-48{font-size:48px !important;line-height:54px !important}.wrapper .size-56{font-size:56px !important;line-height:60px !important}.wrapper .size-64{font-size:64px !important;line-height:63px !important}} </style <meta name="x-apple-disable-message-reformatting" / <style type="text/css" body { margin: 0; padding: 0; } table { border-collapse: collapse; table-layout: fixed; } * { line-height: inherit; } [x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; } .wrapper .footer__share-button a:hover, .wrapper .footer__share-button a:focus { color: #ffffff !important; } .btn a:hover, .btn a:focus, .footer__share-button a:hover, .footer__share-button a:focus, .email-footer__links a:hover, .email-footer__links a:focus { opacity: 0.8; } .preheader, .header, .layout, .column { transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out; } .preheader td { padding-bottom: 8px; } .layout, div.header { max-width: 400px !important; -fallback-width: 95% !important; width: calc(100% - 20px) !important; } div.preheader { max-width: 360px !important; -fallback-width: 90% !important; width: calc(100% - 60px) !important; } .snippet, .webversion { Float: none !important; } .stack .column { max-width: 400px !important; width: 100% !important; } .fixed-width.has-border { max-width: 402px !important; } .fixed-width.has-border .layout__inner { box-sizing: border-box; } .snippet, .webversion { width: 50% !important; } .ie .btn { width: 100%; } .ie .stack .column, .ie .stack .gutter { display: table-cell; float: none !important; } .ie div.preheader, .ie .email-footer { max-width: 560px !important; width: 560px !important; } .ie .snippet, .ie .webversion { width: 280px !important; } .ie div.header, .ie .layout { max-width: 600px !important; width: 600px !important; } .ie .two-col .column { max-width: 300px !important; width: 300px !important;[email protected]) !important; } .tweet { background-image: url(https://support.kyrioschms.com/wp-content/uploads/2021/01/[email protected]) !important; } .linkedinshare { background-image: url(https://support.kyrioschms.com/wp-content/uploads/2021/01/[email protected]) !important; } .forwardtoafriend { background-image: url(https://support.kyrioschms.com/wp-content/uploads/2021/01/[email protected]) !important; } } @media (max-width: 321px) { .fixed-width.has-border .layout__inner { border-width: 1px 0 !important; } .layout, .stack .column { min-width: 320px !important; width: 320px !important; } .border { display: none; } .has-gutter .border { display: table-cell; } } .mso div { border: 0 none white !important; } .mso .w560 .divider { Margin-left: 260px !important; Margin-right: 260px !important; } .mso .w360 .divider { Margin-left: 160px !important; Margin-right: 160px !important; } .mso .w260 .divider { Margin-left: 110px !important; Margin-right: 110px !important; } .mso .w160 .divider { Margin-left: 60px !important; Margin-right: 60px !important; } .mso .w354 .divider { Margin-left: 157px !important; Margin-right: 157px !important; } .mso .w250 .divider { Margin-left: 105px !important; Margin-right: 105px !important; } .mso .w148 .divider { Margin-left: 54px !important; Margin-right: 54px !important; } .mso .size-8, .ie .size-8 { font-size: 8px !important; line-height: 14px !important; } .mso .size-9, .ie .size-9 { font-size: 9px !important; line-height: 16px !important; } .mso .size-10, .ie .size-10 { font-size: 10px !important; line-height: 18px !important; } .mso .size-11, .ie .size-11 { font-size: 11px !important; line-height: 19px !important; } .mso .size-12, .ie .size-12 { font-size: 12px !important; line-height: 19px !important; } .mso .size-13, .ie .size-13 { font-size: 13px !important; line-height: 21px !important; } .mso .size-14, .ie .size-14 { font-size: 14px !important; line-height: 21px !important; } .mso .size-15, .ie .size-15 { font-size: 15px !important; line-height: 23px !important; } .mso .size-16, .ie .size-16 { font-size: 16px !important; line-height: 24px !important; } .mso .size-17, .ie .size-17 { font-size: 17px !important; line-height: 26px !important; } .mso .size-18, .ie .size-18 { font-size: 18px !important; line-height: 26px !important; } .mso .size-20, .ie .size-20 { font-size: 20px !important; line-height: 28px !important; } .mso .size-22, .ie .size-22 { font-size: 22px !important; line-height: 31px !important; } .mso .size-24, .ie .size-24 { font-size: 24px !important; line-height: 32px !important; } .mso .size-26, .ie .size-26 { font-size: 26px !important; line-height: 34px !important; } .mso .size-28, .ie .size-28 { font-size: 28px !important; line-height: 36px !important; } .mso .size-30, .ie .size-30 { font-size: 30px !important; line-height: 38px !important; } .mso .size-32, .ie .size-32 { font-size: 32px !important; line-height: 40px !important; } .mso .size-34, .ie .size-34 { font-size: 34px !important; line-height: 43px !important; } .mso .size-36, .ie .size-36 { font-size: 36px !important; line-height: 43px !important; } .mso .size-40, .ie .size-40 { font-size: 40px !important; line-height: 47px !important; } .mso .size-44, .ie .size-44 { font-size: 44px !important; line-height: 50px !important; } .mso .size-48, .ie .size-48 { font-size: 48px !important; line-height: 54px !important; } .mso .size-56, .ie .size-56 { font-size: 56px !important; line-height: 60px !important; } .mso .size-64, .ie .size-64 { font-size: 64px !important; line-height: 63px !important; ); #ccc}.mso .border,.ie .border{background-color:#ccc}.mso h1,.ie h1{}.mso h1,.ie h1{font-size:64px !important;line-height:63px !important}.mso h2,.ie h2{}.mso h2,.ie h2{font-size:30px !important;line-height:38px !important}.mso h3,.ie h3{}.mso h3,.ie h3{font-size:22px !important;line-height:31px !important}.mso .layout__inner,.ie .layout__inner{}.mso .footer__share-button p{}.mso .footer__share-button p{font-family:sans-serif} </style <meta name="robots" content="noindex,nofollow" / <meta property="og:title" content="Kyrios ChMS" / <!--[if mso] <body class="mso" <![endif]-- <!--[if !mso] <!-- <!--<![endif]-- <table cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="border-collapse: collapse;table-layout: fixed;min-width: 320px;wid [email protected] with subject Remove.</div </div <!--[if mso] <![endif]-- </div </div <!--[if (mso)|(IE)] </td <td style="width: 200px;" valign="top" class="w160" <![endif]-- <div class="column narrow" style="text-align: left;font-size: 12px;line-height: 19px;color: #adb3b9;font-family: sans-serif;Float: left;max-width: 320px;min-width: 200px; width: 320px;width: calc(72200px - 12000%);" <div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 10px;Margin-bottom: 10px;" </div </div <!--[if (mso)|(IE)] </td </tr </table <![endif]-- </div </div </div <div style="line-height:40px;font-size:40px;" </div </td </tr </tbody </table
Notification of open amounts
Layout to be used when sending notifications from the current account (treasury).
<p {{greeting}}<b {{name}}</b ,</p <p </p <p This notification serves to inform you that you have an amount of <b {{valor_conta_current}} {{moeda}}</b outstanding in your current account.</p <p Please rectify the situation as soon as possible.</p <p </p <p Kind regards,</p <p <i Online Demo</i </p
New message
<table border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto; background-color: rgb(244, 208, 46); background-position: center center; background-repeat: no-repeat; background-size: cover;" width="100%" <tbody class="cerberus-tbody" <tr id="68fd76a4-a0c1-8bd2-c365-c1fecfa34178" <td align="center" class="td-container" style="font-size: 0px; background-color: transparent;" valign="top" <div class="builder-actions-control selected" <table align="center" border="0" cellpadding="0" cellspacing="0" class="email-container" data-compile="true" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: auto;" width="600" <tbody <tr <td bgcolor="transparent" dir="ltr" style="background-color: transparent; padding: 10px 0px;" valign="top" width="100%" <table border="0" cellpadding="0" cellspacing="0" class="row" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" width="100%" <tbody <tr <th class="stack-column-center columns" style="font-weight: 400;" valign="top" width="100%" <table border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" width="100%" <tbody <tr <td dir="ltr" style="padding: 0px;" valign="top" <table align="center" data-compile="true" data-control="host-panel" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto; width: auto;" <tbody <tr <td style="border-right: 10px solid transparent;" <table class="link-d090a9d70801d26cb89811663fdab2ec" data-compile="true" data-control="link" id="d090a9d7-0801-d26c-b898-11663fdab2ec" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" <tbody <tr <td style="" <div style="border: 1px solid transparent;" <p style="font-family: "Merriweather Sans", sans-serif; font-size: 13px; color: rgb(75, 75, 75); text-align: center; text-decoration: underline; margin: 0px;" </p </div </td </tr </tbody </table </td </tr </tbody </table </td </tr </tbody </table </th </tr </tbody </table </td </tr </tbody </table </div </td </tr <tr id="6e748dc8-e578-c035-700e-910cc9e2367c" <td align="center" class="td-container" style="font-size: 0px; background-color: transparent;" valign="top" <div class="builder-actions-control selected" <table align="center" border="0" cellpadding="0" cellspacing="0" class="email-container" data-compile="true" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: auto;" width="600" <tbody <tr <td bgcolor="transparent" dir="ltr" style="background-color: transparent; padding: 0px;" valign="top" width="100%" <table border="0" cellpadding="0" cellspacing="0" class="row" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" width="100%" <tbody <tr <th class="stack-column-center columns" style="font-weight: 400;" valign="top" width="100%" <table border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" width="100%" <tbody <tr <td dir="ltr" style="padding: 0px;" valign="top" <table border="0" cellpadding="0" cellspacing="0" class="builder-image-control image-82404b7883591f3c20ad5fb30c879468" data-compile="true" data-control="image" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" width="100%" <tbody <tr <td style="" valign="top" <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;" width="" <tbody <tr <td style="border: 0px;" <a <img align="center" alt="kyrioschmslogoazulpkt314px" border="0" class="float-center fluid" height="117" src="https://www.kyrioschms.com/wp-content/uploads/2020/04/kyrioschmslogoazulpkt314px.png" style="display: block; margin: 0px auto; height: auto; max-width: 600px; border: 0px !important; outline: none !important; width="314" / </a </td </tr </tbody </table </td </tr </tbody </table </td </tr </tbody </table </th