Email Notification Template Design ServiceNow working code

Email notification Template html Design ServiceNow.

Email layout code

<p></p>
<table style="border-collapse: collapse; width: 43.0078%;" border="1" height="183">
<tbody>
<tr style="max-height: 55px; background-color: #14213d; text-align: right; height: 55px;">
<td style="width: 100%;"><img style="align: left;" src="logoinc.png" width="200" height="50" align="left" /></td>
</tr>
<tr>
<td style="width: 100%;">
<table style="text-align: left; border-top: 4px solid #14213d; background: #fff;" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3"><br />
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="15">
<div style="position: absolute; line-height: 0px; font-size: 1px;">&nbsp;</div>
</td>
<td style="padding-right: 10px; font-size: 12px; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;" valign="top" width="325"><span style="font-size: 17px; font-weight: bold;"></span>
<div style="font: 12px Arial, Helvetica, sans-serif; margin: 0 0 5px 0; padding-bottom: 0; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;">
<p style="overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;">${notification:body}</p>
</div>
<div style="font: 11px Arial, Helvetica, sans-serif; margin: 0 0 5px 0; padding-bottom: 0; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;">
<p style="overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;">Click ${URI_REF} here to see more information about this incident</p>
${NOTIF_UNSUB} | ${NOTIF_PREFS}</div>
</td>
<!--RIGHT COLUMN FIRST BOX-->
<td style="border-left: #14213d  2px solid; padding-left: 15px;" valign="top">
<table style="font-size: 12px;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 218.8px;">
<div style="font: bold 16px Arial, Helvetica, sans-serif; color: #14213d; margin: 0 0 5px 0; padding-bottom: 0;"><span style="color: #14213d;">Incident Information</span></div>
<span style="font-family: arial, helvetica, sans-serif;">Incident ID: ${number} </span><br /><span style="font-family: arial, helvetica, sans-serif;">Assignment group:${assignment_group}</span><br /><span style="font-family: arial, helvetica, sans-serif;">Assigned to:${assigned_to}</span><br /><span style="font-family: arial, helvetica, sans-serif;">State:${state}</span></td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN SECOND BOX--> <br />
<table style="font-size: 12px;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div style="font: bold 16px Arial, Helvetica, sans-serif; color: #14213d; margin: 0 0 5px 0; padding-bottom: 0;"><span style="color: #14213d;">Caller Details</span></div>
<span style="font-family: arial, helvetica, sans-serif;">Caller ID: ${caller_id}</span><br /><span style="font-family: arial, helvetica, sans-serif;">Company: ${company}</span></td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN THIRD BOX--> <br />
<table style="font-size: 12px;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div style="font: bold 16px Arial, Helvetica, sans-serif; color: #14213d; margin: 0 0 5px 0; padding-bottom: 0;"><span style="color: #14213d;">Short Description</span></div>
<span style="font-family: arial, helvetica, sans-serif;">${short_description}</span></td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN FOURTH BOX--> <br />
<table style="font-size: 12px;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div style="font: bold 16px Arial, Helvetica, sans-serif; color: #14213d; margin: 0 0 5px 0; padding-bottom: 0;"><span style="color: #14213d;">Have any questions?</span></div>
<span style="font-family: arial, helvetica, sans-serif;">Don't hesitate to hit the reply button to any of the messages you receive.</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="text-align: center; font-size: 12px; border-top: #14213d  4px solid;" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="2">
<div style="position: absolute; line-height: 0px; font-size: 1px;">&nbsp;</div>
</td>
</tr>
<tr>
<td style="font-size: 12px; background-color: #14213d;">&nbsp;</td>
</tr>
</tbody>
</table>
<!-- End of Footer Section --> <!-------- MAin Content Ends --></td>
</tr>
</tbody>
</table>

Notification Code:

Hi ${caller_id.first_name},
    Your incident ${number} regarding ${short_description} is temporarily put on hold  and awaiting additional information or time from you.
 Note: This ticket will auto close in 3 days if we did not hear back.
    Thank you.
 Working Code
 helpdesk@workingcode.in