Email Style Guide

 

An medley of commonly used styles

 
 
Back to Home
 

Liam Garcia

Marketing Director

James Brown

Digital Marketing Mgr

Isabella Moore

Product 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

 
 

Isabella Thomas

Brand Manager

 
 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info
 

James Brown

Digital Marketing Mgr

 
 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info

Alerts

 

Primary Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info
 

Success Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info
 

Warning Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info
 

Alert Callout

 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info
 

Cards B

 

 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
More Info

 
Lorem ipsum dolor sit amet consectetur adipiscing elit facilisis phasellus aptent urna nullam morbi vestibulum.
 
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

 

Velit accumsan fusce aptent facilisis ligula tortor bibendum natoque interdum cras sodales.

— 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

James

Brown

@mdo

2

Olivia

Jones

@fat

3

Logan

Garcia

@mdo

4

William

Brown

@fat

Bordered Table

 

#

First

Last

Handle

1

Charlotte

Hernandez

@callaginn

2

Logan

Garcia

@mdo

3

James

Brown

@mdo

4

Elijah

Hernandez

@callaginn

Striped Table

 

#

First

Last

Handle

1

Liam

Garcia

@fat

2

Oliver

Thomas

@twitter

3

William

Brown

@fat

4

Isabella

Thomas

@twitter

 

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 facilisis phasellus aptent urna nullam morbi vestibulum.

Lorem ipsum dolor sit amet
Aenean accumsan lacus quisque nec
Risus donec scelerisque elit massa
 
More Info