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#3ab97dcolor-aqua
Blue#398acacolor-blue
Green#a2cd3acolor-green
Orange#f36c24color-orange
Purple#933e71color-purple
Red#ef3e37color-red
Yellow#faac1ecolor-yellow
Secondary colors Use sparingly!
Aqua 2#3a8d6ccolor-aqua-2
Blue 2#235d8acolor-blue-2
Green 2#a2cd3acolor-green-2
Orange 2#cb5828color-orange-2
Purple 2#69295bcolor-purple-2
Red 2#c7372fcolor-red-2
Yellow 2#d8962dcolor-yellow-2
Neutral colors
Black#000000color-black
Grey#888888color-grey
Grey Light#d8dadacolor-grey-light
Grey Dark#343433color-grey-dark
White#ffffffcolor-white

Gradients

Background gradients for use

ColorExampleCSS class
Same color gradients
Aquabg-gradient-aqua
Greenbg-gradient-green
Bluebg-gradient-blue
Orangebg-gradient-orange
Purplebg-gradient-purple
Multi-color gradients
Aqua / Greenbg-gradient-aqua-green

Lists

Various list classes for use

TypeExampleCSS 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 Classbtn
TypeExampleCSS class
Default Buttons
Green (Default)Default Buttonbtn btn-default
AquaAqua Buttonbtn btn-aqua
BlueBlue Buttonbtn btn-blue
OrangeOrange Buttonbtn btn-orange
PurplePurple Buttonbtn btn-purple
RedRed Buttonbtn btn-red
YellowYellow Buttonbtn btn-yellow
Primary Buttons
Green (Default)Primary Buttonbtn btn-primary
AquaAqua Buttonbtn btn-primary-aqua
BlueBlue Buttonbtn btn-primary-blue
OrangeOrange Buttonbtn btn-primary-orange
PurplePurple Buttonbtn btn-primary-purple
RedRed Buttonbtn btn-primary-red
YellowYellow Buttonbtn btn-primary-yellow
Dark background Buttons
WhiteWhite Buttonbtn btn-white
TransTransparent Buttonbtn 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

TypeCSS classDescription
Text Formatting
BoldboldMakes text bold
CapitalizecapitalizeMakes first letter in text capitalize
CapscapsMakes all text uppercase
Spaced (5px)spaced-5Gives text 5px letter spacing
Spaced (10px)spaced-10Gives text 10px letter spacing
Font (100)font-100Gives text 100 font weight
Font (300)font-300Gives text 300 font weight
Font (400)font-400Gives text 400 font weight
Font (700)font-700Gives text 700 font weight
Text Alignment
CenteredcenteredMakes text centered
Left Alignedleft-alignedMakes text left aligned
Right Alignedright-alignedMakes text right aligned
Object Alignment
Centeredblock-centeredMakes HTML element centered
Leftblock-leftMakes HTML element float left
Rightblock-rightMakes HTML element float right

Items

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

CSS Classitem

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 Classfeature

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 Classmetric
$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 Classresource

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 Classhero

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