Skip to content

Instantly share code, notes, and snippets.

Avatar

Ted Goas TedGoas

View GitHub Profile
View Outlook Rendering: Foreground images
<img src="https://cdn.website.com/path/to/image.png" 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
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<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).
</p>
View Outlook Rendering: Buttons
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 4px; background: #0077cc;">
<a class="button-a button-a-primary" href="https://www.contactmonkey.com/" 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>
</td>
</tr>
</table>
View Outlook Rendering: Table layout
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
View Outlook Rendering: Inline-block
<div>
<div style=”width; 50%; display: inline-block;”>Column 1</div>
<div style=”width; 50%; display: inline-block;”>Column 2</div>
</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
<style>
/* Remove space around the email design. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}