UI Guide

Various UI components for content and layout.

Global Tags

Default HTML markup for header tags and other global elements

TagFont SizeExample
<h1>3em

Email On Acid

<h2>2.2em

Email On Acid

<h3>1.6em

Email On Acid

<h4>1.4em

Email On Acid

<h5>1.2em
Email On Acid
<h6>1.1em
Email On Acid
<p>1em

When we started this company, email development was anything but easy. The internet was full of resources for web developers, but we could hardly find anything to help email developers. So we set out to create a service that would make it easy to find and fix email problems, and give developers and marketers a place to talk about email. We love email (obviously), and are dedicated to making email testing and marketing as simple as possible.

<p class="headline">1em

When we started this company, email development was anything but easy. The internet was full of resources for web developers, but we could hardly find anything to help email developers.

<blockquote>1.2em
When we started this company, email development was anything but easy. The internet was full of resources for web developers, but we could hardly find anything to help email developers.
<pre>.85em
This is some pre text mostly used for code and debugging.
<ol>1em
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
<ul>1em
  • Unordered list item
  • Unordered list item
  • Unordered list item

Colors

Primary and Secondary colors from EOA styleguide

ColorExampleHexCSS class
Primary colors
Aqua#3ab97d.color-aqua
Blue#398aca.color-blue
Green#a2cd3a.color-green
Orange#f36c24.color-orange
Purple#933e71.color-purple
Red#ef3e37.color-red
Yellow#faac1e.color-yellow
Secondary colors Use sparingly!
Aqua 2#3a8d6c.color-aqua-2
Blue 2#235d8a.color-blue-2
Green 2#a2cd3a.color-green-2
Orange 2#cb5828.color-orange-2
Purple 2#69295b.color-purple-2
Red 2#c7372f.color-red-2
Yellow 2#d8962d.color-yellow-2
Neutral colors
Black#000000.color-black
Grey#888888.color-grey
Grey Light#d8dada.color-grey-light
Grey Dark#343433.color-grey-dark
White#ffffff.color-white

Gradients

Background gradients for use

ColorExampleCSS class
Same color gradients
Aqua.bg-gradient-aqua
Green.bg-gradient-green
Blue.bg-gradient-blue
Orange.bg-gradient-orange
Purple.bg-gradient-purple
Multi-color gradients
Aqua / Green.bg-gradient-aqua-green

Buttons

CSS Class.btn
TypeExampleCSS class
Default Buttons
Green (Default)Default Button.btn btn-default
AquaAqua Button.btn btn-aqua
BlueBlue Button.btn btn-blue
OrangeOrange Button.btn btn-orange
PurplePurple Button.btn btn-purple
RedRed Button.btn btn-red
YellowYellow Button.btn btn-yellow
Primary Buttons
Green (Default)Primary Button.btn btn-primary
AquaAqua Button.btn btn-primary-aqua
BlueBlue Button.btn btn-primary-blue
OrangeOrange Button.btn btn-primary-orange
PurplePurple Button.btn btn-primary-purple
RedRed Button.btn btn-primary-red
YellowYellow Button.btn btn-primary-yellow
Dark background Buttons
WhiteWhite Button.btn btn-white
TransTransparent Button.btn btn-trans

HTML Examples

<a href="#" class="btn btn-primary">Button Text</a>
Scroll Button
<a href="#" class="btn btn-default js-scroll" data-id="target-id">Button Text</a>

Items

Items are used for modular UI elements that have date or type categorization (i.e. blog articles).

CSS Class.item

Block Items

A How-To Guide on Embedding HTML5 Video in Email

Have you been dying to add video to your emails, but worried about the technical barriers...

How to Build an Interactive Magic 8 Ball for Email

This article covers a technique to implement an interactive Magic 8 Ball using only CSS...

Super Mail Quest: An Interview With Designer and Developer Aaron Simmonds

We sat down with the creator of Super Mail Quest, Aaron Simmonds, to learn about what...

HTML Example

<div class="item item-block">
	<div class="item-image">
		<a href="#">
			<img src="https://www.emailonacid.com/wp-content/themes/eoa/images/placeholder-wide.jpg" />
		</a>
	</div>
	<div class="item-content">
		<div class="meta">
			<label class="meta-label label-category">Email Development</label>
			<label class="meta-label">June 30, 2017</label>
		</div>
		<h4 class="item-title"><a href="#">Super Mail Quest: An Interview With Designer and Developer Aaron Simmonds</a></h4>
		<p>We sat down with the creator of Super Mail Quest, Aaron Simmonds, to learn about what...</p>
	</div>
</div>

Thumb Items

A How-To Guide on Embedding HTML5 Video in Email

Have you been dying to add video to your emails, but worried about the technical barriers...

How to Build an Interactive Magic 8 Ball for Email

This article covers a technique to implement an interactive Magic 8 Ball using only CSS...

Super Mail Quest: An Interview With Designer and Developer Aaron Simmonds

We sat down with the creator of Super Mail Quest, Aaron Simmonds, to learn about what...

HTML Example

<div class="item item-thumb">
	<div class="item-image">
		<a href="#">
			<img src="https://www.emailonacid.com/wp-content/themes/eoa/images/placeholder-thumb.jpg" />
		</a>
	</div>
	<div class="item-content">
		<div class="meta">
			<label class="meta-label label-category">Email Development</label>
			<label class="meta-label">July 29, 2017</label>
		</div>
		<h5 class="item-title"><a href="#">A How-To Guide on Embedding HTML5 Video in Email</a></h5>
		<p>Have you been dying to add video to your emails, but worried about the technical barriers...</p>
	</div>
</div>

Features

Features can be used for small pieces of content that require an icon/graphic and simple description.

CSS Class.feature
Email Testing Platform

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Enterprise API

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Testimonials

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Rocket Icon

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

HTML Example

<div class="feature">
	<span class="feature-icon color-green-2"><i class="flaticon-022-browser"></i></span>
	<h5 class="feature-title bold">Email Testing Platform</h5>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

Metrics

Metrics are useful for statistical data and/or callouts.

CSS Class.metric
$4.2 Billion In Email Revenue
1,000,000+ Emails Tested per Month
97% Customer Retention

HTML Example

<div class="metric">
	<span class="metric-value">$4.2 Billion</span>
	<span class="metric-label color-green-2">In Email Revenue</span>
</div>

Column Content

These sections can be used for general content with a respective icon/image/graphic left or right justified. These use general Bootstrap grid columns.

Section Rows

Email Testing

Email Testing

Preview your email in 70+ different email clients and mobile devices in seconds.

Learn more
Email Editor

Email Editor

Build, edit, preview and optimize emails all in one place.

Learn more
Spam Testing

Spam Testing

Resolve deliverability issues before you send; check your email againt spam filters and blacklist services.

Learn more
Email Analytics

Email Analytics

Comprehensive and colorful analytics and reporting help you optimize and compare campaigns.

Learn more

Heros

Hero sections are intended to "elevator pitch" type of content.

CSS Class.hero

Send Better Emails

Short hero headline to communicate emphasis

Send Better Emails

Short hero headline to communicate emphasis

Page Sections

Page sections are used to break up page content and provide background variation.

CSS Class.page-section

Page section variations coming soon...