Incident Report Email

by nathanziarek

HTML

<div class="section">
    Status <span class='tag'>[%Incident Notifications:Status%]</span>
</div>

<div class="document">
    <h1>[%Incident Notifications:Issue Title%]</h1>
    <p>[%Incident Notifications:Issue Description%]</p>
</div>

<div class="document">
    <h2>Impact</h2>
    <p>[%Incident Notifications:Impact Description%]</p>
    <dl>
        <dt>Users</dt>
        <dd>[%Incident Notifications:Affected Users%]</dd>
    </dl>
    <dl>
        <dt>Services</dt>
        <dd>[%Incident Notifications:Services%]</dd>
    </dl>
</div>

<div class="document">
    <h2>Workaround</h2>
    <p>[%Variable:AdditionalUserInstructions%]</p>
</div>

<div class="document">
    <h2>Resolution</h2>
    <dl>
        <dt>Target Resolution Date</dt> 
        <dd>[%Variable:TargetResolutionDate%]</dd>
    </dl>
    <dl>
        <dt>Summary</dt> 
        <dd>[%Variable:ResolutionSummary%]</dd>
    </dl>
</div>

<div class="document">
    <h2>Details</h2>
    <dl>
        <dt>Discovery Date</dt> 
        <dd>[%Incident Notifications:Discovery Date%]</dd>
    </dl>
    <dl>
        <dt>Discovery Method</dt> 
        <dd>[%Incident Notifications:Discovery Method%]</dd>
    </dl>
    <dl>
        <dt>Issue Start Date</dt> 
        <dd>[%Incident Notifications:Issue Start Date%]</dd>
    </dl>
    <dl>
        <dt>Cause</dt> 
        <dd>[%Variable:RootCause%]</dd>
    </dl>
</div>

<div class="document">
    <h2>Update Timeline</h2>
    <p>[%Incident Notifications:Incident Updates%]</p>
</div>

CSS

body {
    font-family: Calibri, Helvetica;
    background: #eee;
}
.document {
    box-shadow: 0 2px 5px #ccc;
    max-width: 600px;
    background: white;
    margin: 0px auto 15px auto;
    border-radius: 2px;
    padding: 15px;
}
.section {
    max-width: 600px;
    margin: 0px auto 15px auto;
    color: #999;
    text-align: center;
}
h1 {
    margin: 0 0 15px 0;
    font-size: 24px;
}
h2 {
    margin: 0 0 15px 0;
    font-size: 20px;
}
p {
    margin: 0 0 15px 0;
}
.tag {
    background: #336699;
    border-radius: 2px;
    display: inline-block;
    padding: 4px 7px;
    color: #fff;
    margin: 0;
}
.status {
    text-align: right;
    max-width: 600px;
    margin: auto
}
dl {
    margin: 0 0 15px 0;
}
dt {
    color: #999
}
dd {
    margin: 0;
}