Email Style Guide

 

An medley of commonly used styles

 
 
Back to Home
 

Evelyn Jones

Graphic Designer

Benjamin Martinez

Marketing Consultant

Mason Hernandez

Content Manager
 

Buttons

Solid Fill

 
Primary Button
 
Success Button
 
Warning Button
 
Alert Button

Solid Rounded

 
Primary Button
 
Success Button
 
Warning Button
 
Alert Button

Outline Rounded

 
Primary Button
 
Success Button
 
Warning Button
 
Alert Button
 
Secondary Button

Profile Cards

 
 

James Jackson

Brand Manager

 
 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info
 

Mason Hernandez

Marketing Director

 
 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info

Alerts

 

Primary Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info
 

Success Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info
 

Warning Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info
 

Alert Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info
 

Cards B

 

 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info

 
Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.
 
More Info
 

Typography

 

Heading

Example

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Markdown

 
# Bootstrap heading
 
## Bootstrap heading
 
### Bootstrap heading
 
#### Bootstrap heading
 
##### Bootstrap heading
 
###### Bootstrap heading
 

Display 1

 

Display 2

 

Display 3

 

Display 4

 

Ultrices faucibus erat curabitur pulvinar nibh eu vestibulum litora molestie elementum non.

— Author Name —
 

Unordered Lists

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
◦ Phasellus iaculis neque
◦ Purus sodales ultricies
◦ Consectetur adipiscing elit
◦ Integer molestie lorem at massa
◦ Vestibulum laoreet porttitor sem
▪ one
▪ two
▪ three
◦ Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ordered Lists

1. Lorem ipsum dolor sit amet
2. Facilisis in pretium nisl aliquet
3. Nulla volutpat aliquam velit
A. blue moon
B. saw you standing
i. alone
ii. without a care text
iii. in your heart
1. chris pratt
2. riding
3. raptors
C. Bop do dop dwee
 
 

Tables

 

These tables override *.msoNormal elements, by going ahead and including them.

Default Table

 

#

First

Last

Handle

1

Emma

Jones

@fat

2

Charlotte

Miller

@fat

3

Liam

Hernandez

@mdo

4

Mason

Thomas

@mdo

Bordered Table

 

#

First

Last

Handle

1

Benjamin

Martinez

@callaginn

2

James

Jackson

@mdo

3

Olivia

Anderson

@twitter

4

Evelyn

Jones

@fat

Striped Table

 

#

First

Last

Handle

1

Mason

Thomas

@mdo

2

Evelyn

Jones

@fat

3

Evelyn

Martinez

@callaginn

4

Liam

Davis

@callaginn
 

Layouts

 

Article Title A

Vestibim congue dui velneq

More Info

Article Title A

Vestibim congue dui velneq

More Info

Lorem Ipsum Dolar

Lorem ipsum dolor sit amet consectetur adipiscing elit tellus tristique sem ullamcorper sollicitudin malesuada ac.

• Lorem ipsum dolor sit amet
• Interdum ut hac sem faucibus
• Sem torquent interdum maecenas molestie
 
More Info