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 |
|
| <ul> | 1em |
|
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-standard |
| Inline List |
| list-inline |
| Icons List | 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 |
|---|
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 |
|---|
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
Preview your email in 70+ different email clients and mobile devices in seconds.
Learn more
Spam Testing
Resolve deliverability issues before you send; check your email againt spam filters and blacklist services.
Learn more
Email Analytics
Comprehensive and colorful analytics and reporting help you optimize and compare campaigns.
Learn more
