Skip to content
Facepile and bulletedlist
Subject: HTML Email Builder - Facepile and BulletedList Example
HTML Email Builder - Facepile and BulletedList Example
Email content with a facepile and bulleted list
Type
Content / Title / Alt Text
Link of Image or Button Destination
HTML
Spacer
Title
Thank you!
Facepile
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.
Divider
Title
Here is a bulletedlist
BulletedList
Spacer
There are no rows in this table
Footer Text: This is your 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
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
Person
There are no rows in this table
Face pile helper list:
@Alan Chowansky
@Joel Davis
@Lola Tseudonym
@Maria Marquis
Facepile 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="center" style="Margin:0;padding-top:0px;padding-bottom:10px;padding-left:0px;padding-right:8px;font-size:0px">
<span style="display:inline-block; max-width:30px; font-size:16px;">
<img src="https://lh3.googleusercontent.com/a-/AOh14GhZ_Dd57SdUygvq6Eijx0qUOdPVSZ7_7Aca3o8g=s96-c" alt="Alan Chowansky" style="display:inline-block;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;border:2px solid #ffffff;background-color:#f9f9f9;border-radius:50%;" width="36px">
</span>
<span style="display:inline-block; max-width:30px; font-size:16px;">
<img src="https://lh3.googleusercontent.com/a-/AOh14Ggyz2d4R4eHJHZjZIopsVRJhF8aDRASepp4fM2k=s96-c" alt="Joel Davis" style="display:inline-block;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;border:2px solid #ffffff;background-color:#f9f9f9;border-radius:50%;" width="36px">
</span>
<span style="display:inline-block; max-width:30px; font-size:16px;">
<img src="https://lh3.googleusercontent.com/a-/AOh14GhXX8Q0aRtTYLxAWxeCfxtBMvw8Bsqz4Y6kuKS9=s96-c" alt="Lola Tseudonym" style="display:inline-block;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;border:2px solid #ffffff;background-color:#f9f9f9;border-radius:50%;" width="36px">
</span>
<span style="display:inline-block; max-width:30px; font-size:16px;">
<img src="https://lh3.googleusercontent.com/a-/AOh14Ggz3m-Ev03kr8TDhoDFiZ3vqnoYE3M0MP2WEB99=s96-c" alt="Maria Marquis" style="display:inline-block;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;border:2px solid #ffffff;background-color:#f9f9f9;border-radius:50%;" width="36px">
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
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.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.