EmailMessageTemplate.html

<link rel="stylesheet" type="text/css" href="https://static.xmatters.com/integrations/common/css/primary_table-7.css">
<style>
    /* common overrides for specific elements */
    body {
    font-family: "Gotham SSm A", "Gotham SSm B", verdana, sans-serif;
    }

    a, a:hover, a:focus {
    color: #0098cc;
    text-decoration: none;
    }

    .body-table {
    font-size: 16px; 
    color: #444444; 
    border-collapse: collapse; 
    margin: 0;
    }

    .primary-container {
    display: inline-block; 
    max-width: 800px;
    }

    .primary-table {
    border: solid 1px #e4e4e4;
    font-size: 14px; 
    color: #444444; 
    margin: 0; 
    border-collapse: collapse;
    }

    .primary-table tr:first-of-type td {
    padding-top: 15px;
    }

    /* useful classes for various components */
    .background-dark {
    background-color: #f6f6f6;
    }

    .background-light {
    background-color: #fcfcfc; 
    }

    .width-full {
    width: 100%;
    }

    .align-left {
    text-align: left;
    }

    .align-center {
    text-align: center;
    }

    .padding-none {
    padding: 0;
    }

    .padding-standard {
    padding: 5px 10px;
    }

    .border-none {
    border: 0;
    }

    /* Embedded specific stylings */
    div.embedded table {
    text-align: left;
    font-size: 14px; 
    color: #444444; 
    background-color: #fcfcfc; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    border-collapse: collapse;
    width: 100%;
    }

    div.embedded table tr:last-of-type {
    border: 0;
    }

    div.embedded table tr:last-of-type td {
    border: 0;
    }

    div.embedded table tr {
    border: solid #e4e4e4;
    border-width: 0 0 1px 0;
    }

    div.embedded table tr:first-of-type td {
    padding-top: 10px;
    }

    div.embedded table tr td {
    padding: 10px 10px;
    /* needed to override in-browser message content default styles */
    border: solid #e4e4e4;
    border-width: 0 0 1px 0;
    }

    div.embedded table tr td h1 {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
    }
    div.embedded table tr td h2 {
    font-size: 14px;
    color: #777777;
    font-weight: normal;
    margin-bottom: 10px;
    }
    div.embedded table tr td p {
    color: #444444;
    margin: 0;
    }
</style>
<table class="body-table width-full align-center background-dark border-none padding-none" id="table-6">
    <tbody>
    <tr>
        <td class="border-none align-center" style="padding: 21px 0 0;" tabindex="0">
        <div>
            <img alt="xMatters" src="https://static.xmatters.com/integrations/common/images/xmatters_logo-1.png" height="35px">
        </div>
        </td>
    </tr>
    <tr>
        <td class="border-none align-center" style="padding: 18px 0 0;" tabindex="0">
        <div>Alert triggered in Example App XYZ</div>
        </td>
    </tr>
    <tr>
        <td class="border-none" style="padding: 7px 0px 0px; margin: 0;" tabindex="0">
        <div class="width-full align-center">
            <div class="primary-container width-full">
            <table class="primary-table width-full align-left background-light padding-none" id="table-7">
                <tbody>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>Title</strong></div><div>${bf122c79-befe-41d3-9fba-e00ff9f258ed}<br></div>
                    </td>
                </tr>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>Summary</strong></div>
                        <div>${dbb1b61a-9099-4a17-a85b-1869c3d63092}<br></div>
                    </td>
                </tr>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>Time of Alert</strong></div>
                        <div><br></div>
                    </td>
                </tr>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>Service Name</strong> </div><div><br></div>
                    </td>
                </tr>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>View Name</strong></div>
                        <div><br></div>
                    </td>
                </tr>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>Level</strong></div>
                        <div>
                            <br>
                        </div>
                    </td>
                </tr>
                <tr class="border-none">
                    <td class="padding-standard border-none" tabindex="0">
                        <div><strong>Link example</strong></div>
                        <div>
                            <a href="LINK_PROPERTY_HERE">Full details (ADD LINK!)</a><br>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            </div>
        </div>
        </td>
    </tr>
    <tr>
        <td class="border-none align-center" style="padding: 4px 0px 21px;" tabindex="0">
        <img src="https://www.graphicdesignbylisa.com/wp-content/uploads/generic-logo.jpg" alt="{alternate_text}" height="35px" width="141px">
        </td>
    </tr>
    </tbody>
</table>