Got plans to display pricing in email?
Although we call them Pricing Tables, you can use this component for lots of things: subscriptions, plans, levels, and so on. Acorn comes with two and three-column pricing tables, each with a boxed and full-width version.
2 Columns - Boxed
When we say 'boxed pricing table', we mean it has 24px apparent padding on each side. It comes with call-to-action buttons that are placed outside the pricing tables themselves. On mobile, the columns will stack.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="col pb-sm-16" width="260" style="padding: 0 8px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="padding: 32px 0; color: #666666; font-size: 13px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Free Edition</div>
<div style="color: #000000; font-size: 42px; margin-bottom: 16px;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>0</div>
<div style="line-height: 42px;">
<strong>10GB</strong> Cloud Storage</div>
<div style="line-height: 42px;">
<strong>5</strong> Galleries</div>
<div style="line-height: 42px;">
<strong>0</strong> Add Ons</div>
<div style="line-height: 42px;">
<strong>0</strong> Personalized Domains</div>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 42px; height: 42px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #000000; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #000000; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
<td align="center" class="col pt-sm-16" width="260" style="padding: 0 8px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#933DED" style="padding: 32px 0; color: #FFFFFF; font-size: 13px;">
<div style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">Pro Edition</div>
<div style="font-size: 42px; margin-bottom: 16px;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>6.95</div>
<div style="line-height: 42px;">
<strong>20GB</strong> Cloud Storage</div>
<div style="line-height: 42px;">
<strong>10</strong> Galleries</div>
<div style="line-height: 42px;">
<strong>100</strong> Add Ons</div>
<div style="line-height: 42px;">
<strong>1</strong> Personalized Domain</div>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 42px; height: 42px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #000000; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #000000; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
</td>
</tr>
</table>3 Columns - Boxed
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="184">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="padding: 32px 0; color: #666666; font-size: 13px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Starter Edition</div>
<div style="color: #000000; font-size: 42px; line-height: 100%;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>2.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div style="line-height: 42px;">LowFi Sound Quality</div>
<div style="line-height: 42px;">Online Listening</div>
<div style="line-height: 42px;">Advertising</div>
<div style="line-height: 42px;">-</div>
<div style="line-height: 42px;">-</div>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #933DED; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #933DED; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="184">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#933DED" style="padding: 32px 0; color: #FFFFFF; font-size: 13px;">
<div style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">Premium Edition</div>
<div style="font-size: 42px; line-height: 100%;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>9.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div style="line-height: 42px;">HiFi Sound Quality</div>
<div style="line-height: 42px;">Online/Offline Listening</div>
<div style="line-height: 42px;">No Advertising</div>
<div style="line-height: 42px;">-</div>
<div style="line-height: 42px;">-</div>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #FFFFFF; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="184">
<table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<tr>
<td align="center" style="padding: 32px 0; color: #666666; font-size: 13px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Pro Edition</div>
<div style="color: #000000; font-size: 42px; line-height: 100%;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>19.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div style="line-height: 42px;">HiFi Sound Quality</div>
<div style="line-height: 42px;">On/Offline Listening</div>
<div style="line-height: 42px;">No Advertising</div>
<div style="line-height: 42px;">Infinite Song Plays</div>
<div style="line-height: 42px;">300K Video Plays</div>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #933DED; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #933DED; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
</td>
</tr>
</table>Full Width Variations
In case you need more space for content, you can opt for the Full Width variations. These are the same layouts, only that container padding and column gutters are removed, to allow for wider columns.
2 Columns - Full Width
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="col pb-sm-16" width="300">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="padding: 32px 0; color: #666666; font-size: 13px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Free Edition</div>
<div style="color: #000000; font-size: 42px; margin-bottom: 16px;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>0</div>
<div style="line-height: 42px;">
<strong>10GB</strong> Cloud Storage</div>
<div style="line-height: 42px;">
<strong>5</strong> Galleries</div>
<div style="line-height: 42px;">
<strong>0</strong> Add Ons</div>
<div style="line-height: 42px;">
<strong>0</strong> Personalized Domains</div>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 42px; height: 42px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #000000; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #000000; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
<td align="center" class="col pt-sm-16" width="300">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#933DED" style="padding: 32px 0; color: #FFFFFF; font-size: 13px;">
<div style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">Pro Edition</div>
<div style="font-size: 42px; margin-bottom: 16px;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>6.95</div>
<div style="line-height: 42px;">
<strong>20GB</strong> Cloud Storage</div>
<div style="line-height: 42px;">
<strong>10</strong> Galleries</div>
<div style="line-height: 42px;">
<strong>100</strong> Add Ons</div>
<div style="line-height: 42px;">
<strong>1</strong> Personalized Domain</div>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 42px; height: 42px!important;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #000000; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #000000; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
</td>
</tr>
</table>3 Columns - Full Width
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="200">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="padding: 32px; color: #666666; font-size: 13px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Starter Edition</div>
<div style="color: #000000; font-size: 42px; line-height: 100%;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>2.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div style="line-height: 42px;">LowFi Sound Quality</div>
<div style="line-height: 42px;">Online Listening</div>
<div style="line-height: 42px;">Advertising</div>
<div style="line-height: 42px;">-</div>
<div style="line-height: 42px;">-</div>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #933DED; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #933DED; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="200">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#933DED" style="padding: 32px; color: #FFFFFF; font-size: 13px;">
<div style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">Premium Edition</div>
<div style="font-size: 42px; line-height: 100%;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>9.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div style="line-height: 42px;">HiFi Sound Quality</div>
<div style="line-height: 42px;">Online/Offline Listening</div>
<div style="line-height: 42px;">No Advertising</div>
<div style="line-height: 42px;">-</div>
<div style="line-height: 42px;">-</div>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #FFFFFF; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="200">
<table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<tr>
<td align="center" style="padding: 32px; color: #666666; font-size: 13px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Pro Edition</div>
<div style="color: #000000; font-size: 42px; line-height: 100%;">
<span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>19.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div style="line-height: 42px;">HiFi Sound Quality</div>
<div style="line-height: 42px;">On/Offline Listening</div>
<div style="line-height: 42px;">No Advertising</div>
<div style="line-height: 42px;">Infinite Song Plays</div>
<div style="line-height: 42px;">300K Video Plays</div>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th style="border: 1px solid #933DED; mso-padding-alt: 4px 32px 8px;">
<a href="http://thememountain.com" style="color: #933DED; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
</td>
</tr>
</table>