Skip to content
Gallery
HTML Email Builder
HTML Email Builder
Examples
Pack Code
Share
Explore
Examples

icon picker
Basic elements

⁠
image.png
⁠
⁠
Note
Adding HTML to the content column, ex: <a href="https://url">text</a>, requires changing smart quotes to regular quotes. You will have to copy/paste regular quotes from a text editor or from the Coda formula builder or from within a code block style like this text. Typing quotes into a text field will automatically change them to smart quotes.

Subject:
HTML Email Builder - Basics Example
⁠
⁠


Email content with the basic elements
Type
Content / Title / Alt Text
Link of Image or Button Destination
HTML
1
Logo
Coda logo
⁠
https://cdn.coda.io/external/img/coda_logo_tomato_soup.png
⁠
⁠
​
2
Image
Header image alt text here
https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max
​
3
Spacer
​
​
​
4
H1
This is a H1 header
​
​
5
H2
This is a H2 header
​
​
6
Title
This is a Title
​
​
7
Subtitle
This is a Subtitle
​
​
8
Paragraph
And this is a paragraph followed by a Divider.
​
​
9
Divider
​
​
​
10
Paragraph
And this is another paragraph, followed by a button. Then the button is followed by two spacers.
​
​
11
Button
Here’s a button!
https://coda.io/welcome
​
12
Spacer
​
​
​
There are no rows in this table
⁠

Footer Text:
This is your footer text!
⁠
⁠


⁠
Send a test to myself
⁠
⁠

Header Image

Any images used in an email need to have publicly accessible URLs. You can upload an image to Coda, right-click, and “Copy image address” to get the URL.
⁠
html-email-sample-header.png
⁠
⁠

Generated Email Code

When combining the content from the table, we use Join(Character(10)) to remove commas from in between the code blocks.
Alignment is an optional parameter with left and center as options.

Formula

Email Content Code

⁠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta name="x-apple-disable-message-reformatting"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="telephone=no" name="format-detection"> <title>HTML Email Builder - Basics Example</title> <!--[if (mso 16)]> <style type="text/css"> a {text-decoration: none;} </style> <![endif]--> <!--[if gte mso 9]> <style>sup { font-size: 100% !important; }</style> <![endif]--> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG></o:AllowPNG> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <style type="text/css"> #outlook a { padding:0; } .es-button { mso-style-priority:100!important; text-decoration:none!important; } a[x-apple-data-detectors] { color:inherit!important; text-decoration:none!important; font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; line-height:inherit!important; } .es-desk-hidden { float:left; overflow:hidden; width:0; max-height:0; line-height:0; mso-hide:all; } [data-ogsb] .es-button { border-width:0!important; padding:12px 35px 12px 35px!important; } @media only screen and (max-width:600px) { p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px!important; text-align:left; margin-bottom:18px } h2 { font-size:26px!important; text-align:left; margin-bottom:16px } h3 { font-size:20px!important; text-align:left; margin-bottom:12px } .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-content-body h2 a, .es-footer-body h2 a { font-size:26px!important } .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-adaptive table, .es-left, .es-right { width:100%!important } .es-content table, .es-footer table, .es-content, .es-footer { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } p, ul li, ol li { margin-bottom:11px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li { margin-bottom:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li { margin-bottom:9px!important } } </style> </head> <body style="width:100%;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0"> <div class="es-wrapper-color" style="background-color:#F9F9F9;padding:20px;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#f9f9f9" origin="0.5, 0" position="0.5, 0"></v:fill> </v:background> <![endif]--> <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#F9F9F9"> <tr> <td valign="top" style="padding:0;Margin:0"> <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%"> <tr> <td align="center" style="padding:0;Margin:0"> <table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:590px;border:1px solid #dddddd;"> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:530px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0;padding-top:5px;padding-bottom:10px;font-size:0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img src="https://cdn.coda.io/external/img/coda_logo_tomato_soup.png" alt="Coda logo" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="68px" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img class="adapt-img" src="https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max" alt="Header image alt text here" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="530px"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <h3 style="Margin:0;line-height:36px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:32px;font-style:normal;font-weight:normal;color:#282F33;margin-bottom:7px"> This is a H1 header </h3> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <h3 style="Margin:0;line-height:28px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#282F33;margin-bottom:7px"> This is a H2 header </h3> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <h3 style="Margin:0;line-height:22px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:18px;font-style:normal;font-weight:normal;color:#282F33;margin-bottom:7px"> <b>This is a Title</b> </h3> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <p style="Margin:0;line-height:20px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:14px;font-style:normal;font-weight:normal;letter-spacing: 0.5px;color:#525252;margin-bottom:6px"> THIS IS A SUBTITLE </p> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;line-height:24px;color:#525252;font-size:16px;margin-bottom:6px"> And this is a paragraph followed by a Divider. </p> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:25px;padding-bottom:40px;font-size:0px"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:1px solid #dddddd;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;line-height:24px;color:#525252;font-size:16px;margin-bottom:6px"> And this is another paragraph, followed by a button. Then the button is followed by two spacers. </p> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <span class="es-button-border" style="border-style:solid;border-color:#282F33;background:#000000;border-width:1px;display:inline-block;border-radius:3px;width:auto"> <a href="https://coda.io/welcome" class="es-button" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#FFFFFF;font-size:14px;border-style:solid;border-color:#000000;border-width:12px 35px 12px 35px;display:inline-block;background:#000000;border-radius:3px;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center"> Here’s a button! </a> </span> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:530px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0;padding-top:5px;padding-bottom:10px;font-size:0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="es-footer" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top"> <tr> <td align="center" style="padding:0;Margin:0"> <table class="es-footer-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;width:590px;border:0;"> <tr> <td align="left" style="Margin:0;padding-left:15px;padding-right:15px;padding-top:20px;padding-bottom:20px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:560px"> <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0"> <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;line-height:18px;color:#B7B7B7;font-size:12px"> This is your footer text! </p></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </body> </html>
⁠
⁠


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.