Backgrounds

FULL-WIDTH IMAGE BACKGROUND
[BG][Full-Img]
BACKGROUND Color
[BG][Color]
gradient bg
[BG][Gradient]
Cover BACKGROUND IMage
[BG][CoverImg]
Cover BACKGROUND IMage + Parallax
[BG][CoverImg][Parallax]
Plain 100% BACKGROUND with thin border
[BG]

Buttons

General Button
[Button][1]
Outline Button
[Button][2]
Translucent Outline Button
[Button][3]
Gradient Button
[Button][4]
two-toned Button
[Button][5]
SQuare Button
[Button][6]
circle button
[Button][7]
rounded-corners button
[Button][8]
pill-shaped button
[Button][9]
leaf-shaped button
[Button][10]
rounded-corners square button
[Button][11]
bottom-border Illusion button
[Button][12]
Button with Image BG
[Button][13]
underlined-text button
[Button][14]
text button
[Button][15]
full width button
[Full-Width-Button]

Cards

Rounded CARD + Bottom info pounch
[Card][1]
|- [Card-Pouch][1] *child div
Rounded CARD + BG Image + Bottom info pounch
[Card][1][Img]
|- [Card-Pouch][1] *child div
CARD + Bottom info pounch
[Card][2]
|- [Card-Pouch][2] *child div
translucent CARD + BG Image + Bottom info pounch
[Card][2][Img]
|- [Card-Pouch][2] *child div
Rounded CARD + left info pounch
[Card][3]
|- [Card-Pouch][3] *child div
Rounded CARD + BG Image + left info pounch
[Card][3][Img]
|- [Card-Pouch][3] *child div
Rounded-top CARD + Bottom info pounch
[Card][5][Img]
|- [Card-Pouch] *child div
Rounded-top CARD + BG Image + Bottom info pounch
[Card][5][Img]
|- [Card-Pouch] *child div
Rounded CARD + right info pounch
[Card][4]
|- [Card-Pouch][4] *child div
Rounded CARD + BG Image + right info pounch
[Card][4][Img]
|- [Card-Pouch][4] *child div
sharp CARD
[Card][6]
sharp CARD + Drop Shadow
[Card][6][Drop-Shadow]
sharp CARD + BG Image
[Card][7][Img]
rounded CARD
[Card][7B]
rounded CARD + BG Image
[Card][7B][Img]
Sharp card + centered img
[Card][7][Img]
|- [Card-Pouch][7] *child div

Heading

Sharp Card + BG IMaGe + Centered Text
[Card][9]
|- [Card-Pouch][9] *child div
|-- *child header

Heading

Short Rounded Card + Centered text
[Card][Short][9]
|- [Card-Pouch][9] *child div
|-- *child header
This is some text inside of a div block.
sharp card + BG Image + Centered text
[Card][9]
|- [Card-Pouch][9] *child div
|-- *child text block
This is some text inside of a div block.
rounded corner card + Centered Text
[Card][Short][1]
|- [Card-Pouch][9] *child div
|-- *child text block

Heading

This is some text inside of a div block.

SWATCH Templates and
POPULAR ColorS SchemeS

Primary

#Number
#Number
#Number
#Number
#Number
Primary color swatch
[ColorScheme][[a1]-[a6]]

Secondary

Secondary color swatch
[ColorScheme][[b1]-[b6]]

Project 2

Smooth
[ColorScheme][[c1]-[c6]]

Project 3

futuristic
[ColorScheme][[d1]-[d6]]

Project 4

Festive
[ColorScheme][[e1]-[e6]]

Swatch 1

Swatch 1

Swatch 2

Swatch 3

Swatch 4

Elements

Web Fonts

Lato

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lato
[Font][1]

Open Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Open Sans
[Font][2]

Montserrat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Montserrat
[Font][3]

PT Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PT Sans
[Font][4]

Roboto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Roboto
[Font][5]

Unbuntu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Unbuntu
[Font][6]

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Custom Placeholder
(currently Arial)
[Font][7]

Lato

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Open Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Montserrat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PT Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Roboto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Unbuntu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Grids

A1

A2

1 Column X 2 Rows
[1x2] *Grid

A1

A2

A3

1 Column X 3 Rows
[1x3] *Grid

A1

A2

A3

A4

1 Column X 4 Rows
[1x4] *Grid

A1

A2

A3

A4

A5

1 Column X 5 Rows
[1x5] *Grid

A1

B1

A2

B2

2 Column X 2 Rows
[2x2] *Grid

A1

B1

A2

B2

A3

B3

2 Column X 3 Rows
[2x3] *Grid

A1

B1

C1

A2

B2

C2

3 Column X 2 Rows
[3x2] *Grid

A1

B1

C1

A2

B2

C2

A3

B3

C3

3 Column X 3 Rows
[3x3] *Grid

A1

B1

C1

A2

B2

C2

A3

B3

C3

A4

B4

C4

3 Column X 4 Rows
[3x4] *Grid

A1

B1

C1

A2

B2

C2

A3

B3

C3

A4

B4

C4

A5

B5

C5

3 Column X 5 Rows
[3x5] *Grid

A1

B1

C1

D1

A2

B2

C2

D2

4 Column X 2 Rows
[4x2] *Grid

A1

B1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

4 Column X 3 Rows
[4x3] *Grid

A1

B1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

A4

B4

C4

D4

4 Column X 4 Rows
[4x4] *Grid

B1

A1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

A4

B4

C4

D4

A5

B5

C5

D5

4 Column X 5 Rows
[4x5] *Grid

A1

B1

C1

D1

E1

A2

B2

C2

D2

E2

5 Column X 2 Rows
[5x2] *Grid

A1

B1

C1

D1

E1

A2

B2

C2

D2

E2

A3

B3

C3

D3

E3

5 Column X 3 Rows
[5x3] *Grid

A1

B1

C1

D1

E1

A2

E2

D2

B2

C2

A3

B3

C3

D3

E3

A4

C4

B4

E4

D4

5 Column X 4 Rows
[5x4] *Grid

A1

B1

C1

D1

E1

A2

B2

C2

D2

E2

A3

B3

C3

D3

E3

A4

B4

C4

D4

E4

A5

B5

C5

D5

E5

5 Column X 5 Rows
[5x5] *Grid

A1

A2

A1

A2

A3

A1

A2

A3

A4

A1

A2

A3

A4

A5

A1

B1

A2

B2

A1

B1

A2

B2

A3

B3

A1

B1

C1

A2

B2

C2

A1

B1

C1

A2

B2

C2

A3

B3

C3

A1

B1

C1

A2

B2

C2

A3

B3

C3

A4

B4

C4

A1

B1

C1

A2

B2

C2

A3

B3

C3

A4

B4

C4

A5

B5

C5

A1

B1

C1

D1

A2

B2

C2

D2

A1

B1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

A1

B1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

A4

B4

C4

D4

B1

A1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

A4

B4

C4

D4

A5

B5

C5

D5

A1

B1

C1

D1

E1

A2

B2

C2

D2

E2

A1

B1

C1

D1

E1

A2

B2

C2

D2

E2

A3

B3

C3

D3

E3

A1

B1

C1

D1

E1

A2

E2

D2

B2

C2

A3

B3

C3

D3

E3

A4

C4

B4

E4

D4

A1

B1

C1

D1

E1

A2

B2

C2

D2

E2

A3

B3

C3

D3

E3

A4

B4

C4

D4

E4

A5

B5

C5

D5

E5

Icons Sites

Sections

This is a wonderful heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button
Simple Hero

This is a wonderful heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button
Structured hero

This is a wonderful heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button
structured hero + bg image

This is a wonderful heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button
structured hero + left align content + BG Image

This is a really wonderful heading in a section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button Text
Simple Hero with text and Image

This is a really wonderful heading in a section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button Text
Simple Hero with text and BG Image

This is a really wonderful heading in a section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Button Text
Simple Hero with Structured text + BG Image + Overlay

This is a really wonderful heading in a section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Learn More
Simple Hero with text and Image [reversed]

Goats are odd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Simple Hero + Image + Contact Form

GENERAL

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqu uis cursus, mi quis viverr.

Simple Element
Element holder