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

icon picker
Facepile and bulletedlist

⁠
image.png
⁠
⁠

Subject:
HTML Email Builder - Facepile and BulletedList Example
⁠
⁠


Email content with a facepile and bulleted list
0
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
Title
Thank you!
​
​
5
Facepile
​
​
​
6
Paragraph
These Codans helped with everything from code and structure to design and text. This wouldn’t be a pack without their extreme patience and great instruction.
​
​
7
Divider
​
​
​
8
Title
Here is a bulletedlist
​
​
9
BulletedList
​
​
​
10
Spacer
​
​
​
There are no rows in this table
⁠

Footer Text:
This is your footer text!
⁠
⁠

Note

The “Code” column in the table uses a SwitchIf() formula so added custom items can be substituted in and still have their code read and ordered with the rest of the email content. I use canvas formulas in these examples to create the code, then pull those into the SwitchIf(). Add as many of these as you need if you want to add multiple custom items.
⁠
Send a test to myself
⁠
⁠

Facepile helper

*May need to add VML to fix styling in Outlook:
Stack Overflow Example
⁠
⁠
The face pile feature requires a list of image links and also takes an optional list of names, or alt text. For this example we’re using a simple table with a people column and referencing that people column in the Face pile helper list. You can edit this formula to return a list in any manner that you need as long as it’s a list of people objects, the Facepile helper code formula will take care of the rest.
Facepile table
0
Person
1
AC
Alan Chowansky
2
JD
Joel Davis
3
LT
Lola Tseudonym
4
MM
Maria Marquis
There are no rows in this table
⁠

Face pile helper list:

⁠
@Alan Chowansky
@Joel Davis
@Lola Tseudonym
@Maria Marquis
⁠
⁠

Facepile helper code

⁠
⁠
⁠

BulletedList

Formula

*Note that empty placeholders are needed if not all items in the list have links. This is an optional parameter, so if your content isn’t linked, you can omit that part of the formula.

Bulletedlist helper code

⁠
<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:10px;padding-bottom:10px;padding-left:0px;padding-right:8px;font-size:0px"> <ul style="padding-left:10px;"> <li style="margin-bottom:6px;-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"> Coda </li> <li style="margin-bottom:6px;-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"> <a target="_blank" href="https://coda.io" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:none;color:#1251BA;font-size:16px"> Coda.io </a> </li> <li style="margin-bottom:6px;-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"> Coda Templates </li> </ul> </td> </tr> </table> </td> </tr> </table> </td> </tr>
⁠
⁠

Generated Email Code

⁠
⁠
⁠
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.