Notification Rule Body Template

Copy 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; margin:0; padding:0">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
        <meta name="x-apple-disable-message-reformatting">
        <meta name="color-scheme" content="light">
        <meta name="supported-color-schemes" content="light">

        <title>Email Notification</title>

        <!--[if gte mso 15]>
        <xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
    </head>

    <body style="-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; margin:0; padding:0">
        <style type="text/css">
:root {
    color-scheme: light;
    supported-color-schemes: light;
}

/* probable hack for gmail */
.main .im {
    color: inherit !important;
}

html,
body {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    margin: 0;
    padding: 0;
}

.branded-background {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;

    color: #212121;
    background-color: #ffffff;
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;

    min-width: 656px; /* 24 + 608 + 24 */
    min-height: 100vh;
}

.branded-background {
    padding: 0 24px 24px;
    box-sizing: border-box;
}

table {
    mso-table-lspace: 0;
    mso-table-rspace: 0;
}

table td {
    vertical-align: top;
}

p:not(:first-of-type) {
    margin: 0 0 24px;

    padding: 0;
}

p + p {
    margin-bottom: 20px;
    padding: 0;
}

.main__body > p:last-child {
    margin-bottom: 0 !important;
}

h1 {
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;

    margin-top: 0;
    margin-bottom: 24px;
}

h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;

    margin-top: 32px;
    margin-bottom: 16px;
}

b,
strong {
    font-weight: bold;
}

a {
    color: #2C98F0;
}

table {
    border-collapse: collapse;

    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

.main {
    width: 608px;
    height: auto;
}

.main__header {
    height: 96px;
}

.main__header td {
    vertical-align: middle;
}

.main__logo {
    font-size: 0;
}

.main__logo span {
    font-size: 20px;
    line-height: 24px;

    font-weight: bold;
}

.action-button {
    font-weight: bold;
    font-size: 14px;

    text-align: center;
    text-transform: capitalize;

    padding: 0 16px;

    background-color: #ffffff;
    border-radius: 4px;
    border: 2px solid #212121;
    color: #212121;
    display: inline-block;

    height: 32px;
    line-height: 32px;
    text-decoration: none;
    -webkit-text-size-adjust: none;
}

.main__body {
    color: #212121;
    background-color: #ffffff;
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;
    border-radius: 4px 4px 0px 0px;

    font-size: 14px;
    line-height: 20px;

    padding: 32px 24px;
}

.main__body > h1 {
    text-transform: capitalize;
}

.main__footer {
    background-color: #212121;
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;
    border-radius: 0px 0px 4px 4px;

    color: #ffffff;

    padding: 24px 24px 32px;

    font-size: 14px;
    line-height: 20px;
}

.main__footer a {
    color: #ffffff;
}

.main__technical-footer {
    font-size: 12px;
    line-height: 16px;
    padding: 24px;

    color: #212121;
}

.detail-item__assistive-text,
.assistive-text {
    font-size: 12px;
    line-height: 16px;
    color: #707070;
}

.assistive-color {
    color: #707070;
}

.summary-table {
    border-spacing: 0 8px;
    border-collapse: separate;
}

.main__body table tr,
.summary-table tr {
    font-size: 0px;
    line-height:0px;
}

.main__body table td,
.summary-table td {
    font-size: 14px;
    line-height: 20px;
}

.main__body table td,
.summary-table td {
    font-size: 14px;
    line-height: 20px;
}


.note {
    border-left: 2px solid #2C98F0;
    padding-left: 24px;
    margin-bottom: 16px;
}

.note.note_notice {
    border-left: 2px solid #FF6A6A;
}

.note .note__title {
    letter-spacing: 0.25px;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    color: #2C98F0;
    font-weight: bold;
    margin-bottom: 18px;
}

.note.note_notice .note__title {
    color: #FF6A6A;
}

.note .note__text {
    margin: 0;
}

.warning-holder {
    padding: 0;
    margin: 0 0 16px;
}

.warning {
    background-color: #ffe9e9;
    border-radius: 2px;
    overflow: hidden;
}

.warning__icon,
.warning__text {
    border: 16px solid #ffe9e9;
}

.warning__icon {
    color: #FF6A6A;
    font-size: 24px;
    width: 24px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.warning__text {
    font-size: 14px;
    padding-left: 0;
    line-height: 20px;
}

.table-item__key {
    width: 60px;
    min-width: 60px;
    white-space: nowrap;

    font-weight: bold;
    padding-right: 16px;
}

.table-item__value {
    width: 100%;
}

hr {
    height: 1px;
    border: none;
    background: #e0e0e0;
    margin-bottom: 24px;
    margin-top: 24px;
}

.logo-image {
    height: 24px;
}

.with-icon {
    white-space: nowrap;
}

.with-icon img.safe-icon {
    width: auto;
}

.with-icon img {
    vertical-align: middle;
    vertical-align: -0.2em;
}

.main__body .with-icon img.safe-icon,
.main__footer .with-icon img.safe-icon {
    height: 16px;
}

.main__technical-footer .with-icon img.safe-icon {
    height: 12px;
}

.main__body .with-icon img.safe-icon-mso,
.main__footer .with-icon img.safe-icon-mso {
    height: 12px;
    mso-hide:all;
}

.main__technical-footer .with-icon img.safe-icon-mso {
    height: 10px;
    mso-hide:all;
}

.embed-content {
    margin-top: 1px;
    padding: 32px 24px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: #F5F5F5;
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;

    max-width: 560px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.main__body table td.font-size-0,
.summary-table td.font-size-0,
.font-size-0 {
    font-size: 0;
    line-height: 0;
}

.font-size-14 {
    font-size: 14px;
    line-height: 20px;
}

.diff__old,
.diff__new {
    display: inline-block;
}

.diff__old {
    background-color: #ffe1e1;
    color: #4d3333;
}

.diff__new {
    background-color: #ceefe3;
}

.diff__old {
    text-decoration: line-through;
}

.diff__old_reference {
    text-decoration: none;
}

.diff__old_reference .reference__name {
    text-decoration: line-through;
}

.embed-content .diff__old,
.embed-content .diff__new {
    width: 100%;
}
        </style>

        <style type="text/css">
.markdown a {
    color: #2C98F0;
}

.markdown + p {
    margin-top: 24px !important;
}

.markdown > :first-child {
    margin-top: 0;
}

.markdown > :last-child {
    margin-bottom: 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5 {
    font-weight: bold;
}

.markdown h1 {
    margin-top: 40px;
    margin-bottom: 28px;
    font-size: 24px;
    line-height: 1.1;
}

.markdown h2 {
    margin-top: 32px;
    margin-bottom: 24px;
    font-size: 20px;
    line-height: 1.2;
}

.markdown h3 {
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 28px;
    line-height: 24px;
}

.markdown h4 {
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 24px;
}

.markdown h5 {
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 24px;
}

.markdown blockquote {
    border-left: 2px solid #2C98F0;
    padding-left: 1em;
    margin: 20px 20px 20px 18px;
}

.markdown p,
.markdown table,
.markdown pre,
.markdown ol,
.markdown ul {
    margin-top: 20px;
    margin-bottom: 20px;
}

.markdown hr {
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
}

.markdown ol,
.markdown ul {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
}

.markdown ol ol,
.markdown ol ul,
.markdown ul ol,
.markdown ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown li {
    margin-left: 1em;
    margin-bottom: 4px;
    margin-top: 4px;
}

.markdown ul li::marker {
    color: #444;
}

.markdown img {
    max-width: 100%;
    max-height: 400px;
}

.markdown code {
    padding-left: 6px;
    padding-right: 6px;
    font-family: "Roboto Mono", monospace;
    background-color: #eeeeee;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    color: inherit;
    box-shadow: none;
}

.markdown code:after,
.markdown code:before {
    content: none;
}
        </style>

        <style type="text/css">
.branded-background {
    background-color: {{ portal.theme.primary }} !important;
}

.main__technical-footer,
.main__technical-footer a {
    color: {{ portal.theme.navText }} !important;
}

.action-button {
    background-color: {{ portal.theme.primary }} !important;
    border-color: {{ portal.theme.navText }} !important;
    color: {{ portal.theme.navText }} !important;
}
        </style>

        <!--[if mso]>
        <style type="text/css" data-premailer="ignore">
.embed-content {
    background-color: #ffffff !important;
    margin-bottom: 1px;
}

.summary-table td {
    padding-bottom: 8px !important;
}

.chip-wrapper {
    padding-left: 4px !important;
    vertical-align: middle !important;
}

.chip {
    mso-line-height-rule: exactly !important;
    vertical-align: middle !important;

    font-size: 14px !important;
    line-height: 16px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.warning__icon {
    width: 56px !important;
}

.table-item__key {
    width: 170px !important;
    min-width: 170px !important;
    white-space: nowrap;

    padding-right: 0 !important;
}

.safe-icon {
    display: none !important;
}
        </style>
        <![endif]-->

        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CRoboto+Mono" rel="stylesheet" type="text/css">

        <!--[if mso]>
        <style type="text/css">
            body,
            table,
            td,
            p,
            h1,
            h2,
            h3,
            span,
            a {
                font-family: Arial, Helvetica, sans-serif !important;
            }

            table {
                 border-collapse: collapse;
                 border-spacing: 0;
                 mso-table-lspace: 0pt !important;
                 mso-table-rspace: 0pt !important;
            }

            table, tr, td {border-collapse: collapse;}
            tr { font-size:0px; line-height:0px; border-collapse: collapse; }
        </style>
        <![endif]-->

        {# branded background for outlook #}
        <!--[if mso]>
            <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                <v:fill type="tile" src="" color="{{ portal.theme.primary }}"/>
            </v:background>
        <![endif]-->

        <div class="branded-background" style='color:#212121; background-color:#fff; background-origin:border-box; background-clip:border-box; background-repeat:no-repeat; min-width:656px; min-height:100vh; padding:0 24px 24px; box-sizing:border-box; font-family:Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important' bgcolor="#ffffff">

            {# hack for outlook to set max width #}
            <!--[if mso]>
                <table align="center" width="100%" style="width: 100%;">
                    <tr>
                        <td>&nbsp;</td>
                        <td align="center" width="608" style="width: 608px;">
                            <table align="center" border="0" width="100%" style="width: 100%;">
                                <tr>
                                    <td align="center">
            <![endif]-->

            <center>
                <table class="main" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0; mso-table-rspace:0; border-collapse:collapse; text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; width:608px; height:auto; margin:0; padding:0" width="608" height="auto">
                    <tbody>
                        <tr valign="middle" class="main__header" style="height:96px" height="96">
                            <td class="main__logo" style="vertical-align:middle; font-size:0" valign="middle">
                                {% if portal and portal.urls.logo %}
                                    <img src="{{ portal.urls.logo }}" alt="{{ portal.domain | e }} Logo" class="logo-image" style="height:24px" height="24">
                                {% else %}
                                    <span style="font-size:20px; line-height:24px; font-weight:bold">{{ sender.name | e }}</span>
                                {% endif %}
                            </td>
                            <td class="main__action-button" align="right" style="vertical-align:middle" valign="middle"></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="main__body" style="vertical-align:top; color:#212121; background-color:#fff; background-origin:border-box; background-clip:border-box; background-repeat:no-repeat; border-radius:4px 4px 0 0; font-size:14px; line-height:20px; padding:32px 24px" valign="top" bgcolor="#ffffff">
{{ content }}
</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="main__footer" style="vertical-align:top; background-color:#212121; background-origin:border-box; background-clip:border-box; background-repeat:no-repeat; border-radius:0 0 4px 4px; color:#fff; padding:24px 24px 32px; font-size:14px; line-height:20px" valign="top" bgcolor="#212121"></td>
                        </tr>
                    </tbody>
                </table>
            </center>

            <!--[if mso]>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            <![endif]-->

        </div>
    </body>
</html>

© 2024 Ingram Micro, Inc. All Rights Reserved. Privacy Policy, Terms of Use and Legal

CloudBlue, an Ingram Micro business, uses cookies to improve the usability of our site. By continuing to use this site and/or logging in you are accepting the use of these cookies. For more information, visit our Privacy Policy.
I accept