Stats

Stats provide users with data related to their sending. While not required, stats are often accompanied with a data visualization.

Stats Card

94.84%

Delivered

56.99%

Unique Opens

6.98%

Unique Clicks

1,289

Requests

0.21%

Bounces

0.45%

Unsubscribes

0.3%

Spam Reports

12,230

Emails Sent

96.60%

Delivered

82.20%

Unique Opens

60.24%

Unique Clicks

2.04%

Unsubscribes

Container(s) .stats-card
<div class="stats-card">
<div class="card-stat">
<p class="stat">12,230</p>
<p class="label">Emails Sent</p>
</div>
<div class="card-stat">
<p class="stat delivered">96.60%</p>
<p class="label">Delivered</p>
</div>
<div class="card-stat">
<p class="stat unique-opens">82.20%</p>
<p class="label">Unique Opens</p>
</div>
<div class="card-stat">
<p class="stat unique-clicks">60.24%</p>
<p class="label">Unique Clicks</p>
</div>
<div class="card-stat">
<p class="stat unsubscribes">2.04%</p>
<p class="label">Unsubscribes</p>
</div>
</div>
view raw stats-card.html hosted with ❤ by GitHub

Guidelines

  • By default, stats and labels are colored Slate (#294661). You can change the color of a stat by using one of the classes defined in stats.scss.

Stats Card with Secondary Stats

873

Results

81.56%

712

Valid

10.88%

95

Risky

7.56%

66

Invalid

Container(s) .stats-card.secondary
<div class="stats-card secondary">
<div class="card-stat">
<p class="stat">873</p>
<p class="label">Results</p>
</div>
<div class="card-stat">
<p class="stat small-stat valid">81.56%</p>
<p class="stat valid">712</p>
<p class="label">Valid</p>
</div>
<div class="card-stat">
<p class="stat small-stat risky">10.88%</p>
<p class="stat risky">95</p>
<p class="label">Risky</p>
</div>
<div class="card-stat">
<p class="stat small-stat invalid">7.56%</p>
<p class="stat invalid">66</p>
<p class="label">Invalid</p>
</div>
</div>