Cards

Cards are containers that are used to wrap small amounts of content. Cards typically contain a heading, short paragraph and a button. Cards can also contain a small badge, used to help highlight an option or feature for the user. Their width should rely their parent element, typically a column container provided by the grid system.

Standard

Recommended

Web API

The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.

Choose

SMTP Relay

The easiest way to send email. It only requires modifying your application's SMTP configuration.

Choose
Containers .card
Modifiers .is-centered .is-thin .is-fixed-height
Optional Elements .card-note
<div class="card is-centered">
<span class="badge mantis">Recommended</span>
<h2>Web API</h2>
<p>The fastest, most flexible way to send email using languages like Node.js, Ruby, C#, and more.</p>
<a class="btn btn-primary" href="#">Choose</a>
</div>

Guidelines

  • Headings should be title case and ≤ 30 characters.
  • Body content should be complete sentences and ≤ 200 characters.
Don't use excessive text.

Actions

Included in opt out preferences

Special Offers

Receive promotions, special offers, and more with our specail offer emails.

Unsubscribes 0

ID 2424

Event Annoucements

Hear about our latest events and when we're coming to a city near you.

Unsubscribes 0

ID 9624

Containers .card
Modifiers .is-centered .is-thin .is-selected
HTML Elements .actions .action-icons
Optional Elements .card-id .card-unsubs .card-unsub-prefs
<div class="card is-centered is-selected">
<p class="card-unsub-prefs"><i class="sg-icon sg-icon-check-circle"></i>Included in opt out preferences</p>
<h2>Special Offers</h2>
<p>Receive promotions, special offers, and more with our specail offer emails.</p>
<p class="card-unsubs"><strong>Unsubscribes</strong> 0</p>
<p class="card-id"><strong>ID</strong> 2424</p>
<div class="actions">
<div class="btn btn-dropdown dropdown">
<i class="sg-icon sg-icon-ellipsis-vertical"></i>
<ul class="dropdown-menu">
<li><a class="dropdown-link"><i class="sg-icon sg-icon-pencil"></i> Edit</a></li>
<li><a class="dropdown-link"><i class="sg-icon sg-icon-view"></i> Preview</a></li>
<li><a class="dropdown-link"><i class="sg-icon sg-icon-export"></i> Upload CSV</a></li>
<li><a class="dropdown-link"><i class="sg-icon sg-icon-download"></i> Export</a></li>
<li><a class="dropdown-link"><i class="sg-icon sg-icon-contacts-alt"></i> Manually Add</a></li>
</ul>
</div>
</div>
</div>

Large

Email Integration

Let's test your integration

Send an email from your application using the code you just integrated. If that runs without error, click "Verify Integration."

Checking...
Containers .card
Modifiers .is-centered
<div class="card is-centered">
<img class="card-icon" src="img/icons/icon-email-server.svg" alt="Email Integration">
<h2>Let's test your integration</h2>
<p>Send an email from your application using the <a href="#">code you just integrated</a>. If that runs without error, click "Verify Integration." </p>
<a class="btn btn-primary is-disabled" href="#">Checking...</a>
</div>
view raw card-large.html hosted with ❤ by GitHub

Split

Estimate Your Cost

Use this calculator to help identify which plan is the best deal for you.

Pay Per Email

150,000 emails per month $37.50/mo*


Pay Per Contact

100,000 contacts stored $100.00/mo*

Containers .card
Required .is-split
HTML Element(s) div.split-section
<div class="card is-split">
<h2>Estimate Your Cost</h2>
<p class="small">Use this calculator to help identify which plan is the best deal for you.</p>
<div class="split-content">
<h3>Pay Per Email</h3>
<p class="details small"><span><strong>150,000</strong> <span class="has-underline" data-tooltip="Based on the number of emails you send through Marketing Campaigns, not how many people send to." data-tooltip-pos="up" data-tooltip-length="large">emails per month</span></span> <span>$37.50/mo*</span></p>
<div class="input-range-wrap">
<input id="input-range-emails" type="range" min="0" max="100" value="15">
</div>
<hr class="has-label" data-label="or">
<h3>Pay Per Contact</h3>
<p class="details small"><span><strong>100,000</strong> <span class="has-underline" data-tooltip="Based on the number of unique email addresses you store in Marketing Campaigns, not how often you send to them." data-tooltip-pos="up" data-tooltip-length="large">contacts stored</span></span> <span>$100.00/mo*</span></p>
<div class="input-range-wrap">
<input id="input-range-contacts" type="range" min="0" max="100" value="15">
</div>
</div>
</div>
view raw card-split.html hosted with ❤ by GitHub

Inline

Buttons

Choose

Icon

16%

Containers .card
Required .is-inline
Modifiers .is-centered .is-thin
<div class="card is-thin is-inline">
<p class="card-title">Node.js</p>
<a class="btn btn-small btn-secondary" href="#">Choose</a>
</div>

Metric

Total Revenue

$23,231

Total Cost

$10,000

Return On Ad Spend

232.3%

Containers .card
Required .is-metric
<div class="card is-metric col-3">
<h4>Total Revenue</h4>
<p class="card-data">$23,231</p>
</div>

Plan

Pro 100K

100,000 emails/mo + $0.00085 per additional email

Your Current Plan

Pro 300K

300,000 emails/mo + $0.00050 per additional email

$199.95/mo*

Select

Pro 700K

700,000 emails/mo + $0.00045 per additional email

$399.95/mo*

Select
Containers .card
Required .is-plan
Optional Elements .plan-current .plan-price

Modules

Image

Image & Text

Text

Code

Columns

Button

Divider

Spacer

Social

Containers .card
Required .is-module
Modifiers .is-centered
<div class="card is-module is-centered">
<p><i class="sg-icon sg-icon-images"></i> Image</p>
</div>

Upsell

100/day not enough? Send 40,000 emails/mo through our API for free for 30 days!

Interested in testing out the best that our Email API has to offer? With our Free Trial, you’ll have access to 40,000 emails through the API for 30 days.

Containers .card
Required .is-upsell
HTML Elements .btn-primary .btn-tertiary
<div class="card is-upsell">
<h3>100/day not enough? Send 40,000 emails/mo through our API for free for 30 days!</h3>
<p>Interested in testing out the best that our Email API has to offer? With our Free Trial, you’ll have access to 40,000 emails through the API for 30 days.</p>
<div class="btn-list">
<a href="#" class="btn btn-primary btn-small">Send 40K Emails for Free</a>
<a href="#" class="btn btn-tertiary btn-small">Learn More</a>
</div>
</div>