Skip to content

Instantly share code, notes, and snippets.


Ted Goas TedGoas

View GitHub Profile
View Outlook Rendering: Foreground images
<img src="" width="600" height="" alt="alt_text" border="0" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; display: block;">
View Outlook Rendering: Web fonts
<link href="" rel="stylesheet">
<p style=”font-family: Roboto, arial, sans-serif”>
This text will be displayed in Roboto in email clients that support web fonts (like Outlook for Mac) and Arial in email clients that don’t (like Windows Outlook 2010-2019).
View Outlook Rendering: Buttons
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<td style="border-radius: 4px; background: #0077cc;">
<a class="button-a button-a-primary" href="" style="background: #0077cc; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; border-radius: 4px;">Button text</a>
View Outlook Rendering: Table layout
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<td>Column 1</td>
<td>Column 2</td>
View Outlook Rendering: Inline-block
<div style=”width; 50%; display: inline-block;”>Column 1</div>
<div style=”width; 50%; display: inline-block;”>Column 2</div>
View Outlook Rendering: Body reset
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly;”>
View Outlook Rendering: Table reset
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
View Outlook Rendering: Head reset
/* Remove space around the email design. */
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;