Email Cards

Email cards are containers that are used to wrap email data for automations. Email cards typically contain information about the email (subject, preheader, and sender), along with a preview of the content and interface controls to edit or add additional emails to the automation series.

Standard

Container(s) .email-card-wrap.is-live
Required .email-card-send-time .email-card
Modifiers .is-live .is-paused .is-editable .is-disabled .has-alert .has-value
Modifiers .stats-card
<div class="email-card-wrap is-live">
<div class="email-card-send-time has-value">
<a class="btn btn-secondary" href="#">Send Instantly</a>
</div>
<div class="email-card-stats">
<div class="email-stat">
<p class="stat">12,230</p>
<p class="label">Emails Sent</p>
</div>
<div class="email-stat">
<p class="stat delivered">96.60%</p>
<p class="label">Delivered</p>
</div>
<div class="email-stat">
<p class="stat unique-opens">82.20%</p>
<p class="label">Unique Opens</p>
</div>
<div class="email-stat">
<p class="stat unique-clicks">60.24%</p>
<p class="label">Unique Clicks</p>
</div>
<div class="email-stat">
<p class="stat unsubscribes">2.04%</p>
<p class="label">Unsubscribes</p>
</div>
</div>
<div class="email-card">
<div class="email-card-count">
<p>Email 1</p>
</div>
<div class="email-card-content">
<a class="btn btn-secondary" href="#">
<span class="email-card-content-edit"><i class="sg-icon sg-icon-pencil"></i> Edit</span>
</a>
</div>
<div class="email-card-details">
<table>
<tr>
<td class="label">Subject</td>
<td><a href="#">Welcome to SendGrid</a></td>
</tr>
<tr>
<td class="label">Preheader</td>
<td><a href="#">Get started sending up to 12,000 emails today</a></td>
</tr>
<tr>
<td class="label">From Sender</td>
<td><a href="#">Tyler Hale &lt;tyler.hale@sendgrid.com&gt;</a></td>
</tr>
</table>
</div>
<div class="email-row-actions">
<i class="sg-icon sg-icon-ellipsis"></i>
<div class="action-icons">
<span data-tooltip="Edit" data-tooltip-pos="up"><i class="sg-icon sg-icon-pencil"></i></span>
<span data-tooltip="Duplicate" data-tooltip-pos="up"><i class="sg-icon sg-icon-copy"></i></span>
<span data-tooltip="Create Template" data-tooltip-pos="up"><i class="sg-icon sg-icon-create"></i></span>
<span data-tooltip="Export HTML" data-tooltip-pos="up"><i class="sg-icon sg-icon-export"></i></span>
<span data-tooltip="Preview" data-tooltip-pos="up"><i class="sg-icon sg-icon-view"></i></span>
<span data-tooltip="Delete" data-tooltip-pos="up"><i class="sg-icon sg-icon-trash"></i></span>
</div>
</div>
</div>
</div>

Edit Mode

Container(s) .email-card-wrap.is-editable
Required .email-card-send-time .email-card
Modifiers .is-live .is-paused .has-alert.has-value
Modifiers .stats-card
<div class="email-card-wrap is-editable">
<div class="email-card-send-time">
<a class="btn btn-secondary" href="#">Select Send Time</a>
</div>
<div class="email-card">
<div class="email-card-count">
<p>Email 1</p>
</div>
<div class="email-card-content">
<a class="btn btn-secondary" href="#">Add Email Content</a>
</div>
<div class="email-card-details">
<table>
<tr>
<td class="label">Subject</td>
<td><a href="#">Edit Subject</a></td>
</tr>
<tr>
<td class="label">Preheader</td>
<td><a href="#">Edit Preheader</a></td>
</tr>
<tr>
<td class="label">From Sender</td>
<td><a href="#">Select Sender</a></td>
</tr>
</table>
</div>
<div class="email-row-actions">
...
</div>
</div>
</div>

Alerts

Container(s) .email-card-wrap.has-alert
Required .email-card-send-time .email-card
Modifiers .is-live .is-paused .is-editable .has-value
Optional .stats-card
<div class="email-card-wrap is-live has-alert">
<div class="email-card-send-time has-value">
<a class="btn btn-secondary" href="#">Send Instantly</a>
<div class="alert alert-warning">
<p><i class="sg-icon sg-icon-info-circle"></i>Changes you've made to this email have not been applied to your live automation.<button class="btn btn-small btn-primary">Save and Apply</button></p>
</div>
</div>
<div class="email-card-stats">
...
</div>
<div class="email-card">
<div class="email-card-count">
<p>Email 1</p>
</div>
<div class="email-card-content">
<a class="btn btn-secondary" href="#">
<span class="email-card-content-edit"><i class="sg-icon sg-icon-pencil"></i> Edit</span>
</a>
</div>
<div class="email-card-details">
<table>
<tr>
<td class="label">Subject</td>
<td><a href="#">Welcome to SendGrid</a></td>
</tr>
<tr>
<td class="label">Preheader</td>
<td><a href="#">Get started sending up to 12,000 emails today</a></td>
</tr>
<tr>
<td class="label">From Sender</td>
<td><a href="#">Tyler Hale &lt;tyler.hale@sendgrid.com&gt;</a></td>
</tr>
</table>
</div>
<div class="email-row-actions">
...
</div>
</div>
<div class="alert alert-warning">
<p><i class="sg-icon sg-icon-info-circle"></i>Changes you've made to this email have not been applied to your live automation.<button class="btn btn-small btn-primary">Save and Apply</button></p>
</div>
</div>