UI Guide

Various UI components for content and layout.

Global Tags

Default HTML markup for header tags and other global elements

Tag Font Size Example
<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

Color Example Hex CSS 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

Color Example CSS 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

Lists

Various list classes for use

Type Example CSS class
Standard List
  • List item
  • List item
  • List item
 list-standard
Inline List
  • List item
  • List item
  • List item
 list-inline
Icons List
  • List item
  • List item
  • List item
 list-icons
Nav List list-icons
Menu List list-menu

HTML Examples

<ul class="list-standard">
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
<ul class="list-icons">
	<li><i class="fa fa-globe"></i> List item</li>
	<li><i class="fa fa-tasks"></i> List item</li>
	<li><i class="fa fa-edit"></i> List item</li>
</ul>
<ul class="list-nav">
	<li><a href="#">Nav Item 1</a></li>
	<li><a href="#">Nav Item 2</a></li>
	<li><a href="#">Nav Item 3</a></li>
</ul>
<ul class="list-menu">
	<li>
		<a href="#">
			<span class="menu-number">1</span>
			<span class="menu-title">Menu Item 1</span>
		</a>	
	</li>
	<li>
		<a href="#">
			<span class="menu-number">2</span>
			<span class="menu-title">Menu Item 1</span>
		</a>	
	</li>
	<li>
		<a href="#">
			<span class="menu-number">3</span>
			<span class="menu-title">Menu Item 1</span>
		</a>	
	</li>
</ul>

Buttons

CSS Class btn
Type Example CSS class
Default Buttons
Green (Default) Default Button btn btn-default
Aqua Aqua Button btn btn-aqua
Blue Blue Button btn btn-blue
Orange Orange Button btn btn-orange
Purple Purple Button btn btn-purple
Red Red Button btn btn-red
Yellow Yellow Button btn btn-yellow
Primary Buttons
Green (Default) Primary Button btn btn-primary
Aqua Aqua Button btn btn-primary-aqua
Blue Blue Button btn btn-primary-blue
Orange Orange Button btn btn-primary-orange
Purple Purple Button btn btn-primary-purple
Red Red Button btn btn-primary-red
Yellow Yellow Button btn btn-primary-yellow
Dark background Buttons
White White Button btn btn-white
Trans Transparent 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>

Helper Classes

Various styles and helpers

Type CSS class Description
Text Formatting
Bold bold Makes text bold
Capitalize capitalize Makes first letter in text capitalize
Caps caps Makes all text uppercase
Spaced (5px) spaced-5 Gives text 5px letter spacing
Spaced (10px) spaced-10 Gives text 10px letter spacing
Font (100) font-100 Gives text 100 font weight
Font (300) font-300 Gives text 300 font weight
Font (400) font-400 Gives text 400 font weight
Font (700) font-700 Gives text 700 font weight
Text Alignment
Centered centered Makes text centered
Left Aligned left-aligned Makes text left aligned
Right Aligned right-aligned Makes text right aligned
Object Alignment
Centered block-centered Makes HTML element centered
Left block-left Makes HTML element float left
Right block-right Makes HTML element float right

Items

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

CSS Class item

Default 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">
	<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">Category</label>
			<label class="meta-label">Date</label>
		</div>
		<h4 class="item-title"><a href="#">Item Title</a></h4>
		<p>Item description...</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">Category</label>
			<label class="meta-label">Date</label>
		</div>
		<h4 class="item-title"><a href="#">Item Title</a></h4>
		<p>Item Description...</p>
	</div>
</div>

Features

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

CSS Class feature

Default Features

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.

World Class

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="fa-desktop"></i></span>
	<h5 class="feature-title bold">Title</h5>
	<p>Description...</p>
</div>

Stacked Features

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.

World Class

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 feature-stacked">
	<span class="feature-icon color-green-2"><i class="fa-desktop"></i></span>
	<h5 class="feature-title bold">Title</h5>
	<p>Description...</p>
</div>

Centered Features

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.

World Class

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 feature-centered">
	<span class="feature-icon"><img src="https://www.emailonacid.com/wp-content/themes/eoa/images/compare-icon-check-mark.png" /></span>
	<h5 class="feature-title bold">Title</h5>
	<p>Description...</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>

Resources

Resources are used in the "Resources" area for guides, articles, etc.

CSS Class resource
MailNinja "Summer" Responsive Email Template
The Art of the Click
Making the Case for Interactive Email: What’s Possible, Beautiful, and Relevant

HTML Example

<div class="resource">
	<div class="resource-image">
		<a href="#">
			<img src="https://www.emailonacid.com/wp-content/themes/eoa/images/placeholder-wide.jpg" />
		</a>
	</div>
	<div class="resource-content">
		<div class="meta">
			<label class="meta-label label-category">Category</label>
		</div>
		<h5><a href="#">Resource Title</a></h5>
	</div>
</div>

Heros

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

CSS Class hero

Send Better Emails

Short hero headline to communicate emphasis

HTML Example

<div class="hero">
	<div class="container">	
		<div class="hero-content">
			<h1 class="centered">Hero Title</h1>
			<p class="headline centered">Headline / Description</p>
		</div>
	</div>
</div>

Send Better Emails

Short hero headline to communicate emphasis

HTML Example

<div class="hero hero-dark">
	<div class="container">	
		<div class="hero-content">
			<h1 class="centered">Hero Title</h1>
			<p class="headline centered">Headline / Description</p>
		</div>
	</div>
</div>

Page Headers

Page headers are used at the top of specific pages right below the site header.

CSS Class page-header
Using Page Headers

Page headers are very similar to heros but with less impact - i.e. less padding/height. They are most helpful to use on sub/child pages.

HTML Example

<div class="page-header">
	<div class="container">	
		<h1>Page Title</h1>
	</div>
</div>

Page Sections

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

CSS Class page-section
Using Page Sections

Page sections are the basic building blocks for every page. They have different variations such as padding, background images, etc., which can be found int the site stylesheet. You can apply .bg- CSS classes to them to dictate their background treatement. Everything else within them is dictated by it's own HTML (i.e. rows, features, items, etc.).

HTML Example

<div class="page-section">
	<div class="container">	
		[section HTML / content...]
	</div>
</div>

*Note: Do not include the child container div if you want elements in the page-section to span full width.

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