Email Style Guide

Built by Stephen Ginn

Callouts

Primary Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisltinc, tincidunt eu ultrices vitae, commodo vel magna. Vestibulum congue dui vel nequem.

Read Article
 

Alerts

Primary Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisltinc, tincidunt eu ultrices vitae, commodo vel magna. Vestibulum congue dui vel nequem.
Read Article
 

Success Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisltinc, tincidunt eu ultrices vitae, commodo vel magna. Vestibulum congue dui vel nequem.
Read Article
 

Danger Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisltinc, tincidunt eu ultrices vitae, commodo vel magna. Vestibulum congue dui vel nequem.
Read Article
 

Warning Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisltinc, tincidunt eu ultrices vitae, commodo vel magna. Vestibulum congue dui vel nequem.
Read Article
 

Info Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisltinc, tincidunt eu ultrices vitae, commodo vel magna. Vestibulum congue dui vel nequem.
Read Article
 

Typography

HeadingExample
<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>
h5. Bootstrap heading
<h6></h6>
h6. Bootstrap heading

Display 1

Display 2

Display 3

Display 4

Blockquote:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

This table overrides *.msoNormal elements, by going ahead and including them.

#

First

Last

Handle

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

This table doesn't generate *.msoNormal elements, since the table cells don't use css padding

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Layouts

#

Article Title A

Vestibulum congue dui vel neque

Read Article
#

Article Title B

Vestibulum congue dui vel neque

Read Article
#

Article Title

Vestibulum congue dui vel neque

Read Article
#

Article Title Z

Vestibulum congue dui vel neque

Read Article 2

Lorem Ipsum Dolar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque nisl, tincidunt eu ultrices vitae.

•Lorem ipsum dolor sit amet
•Maecenas neque nisl
•Elementum nisi tristique
 
Read More
Staff Name

Staff Name

Staff Position Here

Staff Name

Staff Name

Staff Position Here

Staff Name

Staff Name

Staff Position Here