# 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

#### 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
HTML Elements | .actions .action-icons
Optional Elements | .card-id .card-unsubs .card-unsub-prefs

# Large

## 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

# 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

# Inline

Node.js

Choose

Ruby

Choose

Go

Choose

Containers | .card
Required | .is-inline
Modifiers | .is-centered .is-thin

# Modules

Image

Image & Text

Text

Code

Columns

Button

Divider

Spacer

Social

Containers | .card
Required | .is-module
Modifiers | .is-centered