Style guide

The Stylebook is a simple styleguide template you can use for your next project. Nail the basics and you will get no problems later on in your project.

Accent
#12c2e9
#c471ed
#f64f59
AAA
Dark
#202020
AAA
Grey
#444
AAA
Gainsboro
#b3b3b3
AAA
White Smoke
#f1f1f1
AAA
Light
#FFFFFF
AAA
Colour 1
#12c2e9
AAA
Colour 2
#c271ed
AAA
Colour 3
#f64f59
AAA
Outline Grey
Outline Black
Outline White
White BG
Black BG
Blur BG
Hover Light
Hover Dark
Hover Colour
Heading Large

Ligula Vehicula

Heading 1

Ligula Vehicula

Heading 2

Ligula Vehicula

Heading 3

Ligula Vehicula

Heading 4

Ligula Vehicula

Heading 5
Ligula Vehicula
Heading 6
Ligula Vehicula
Paragraph

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.

Paragraph large

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.

Paragraph small

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.

caps
This is some text inside of a div block.
Unordered List
  • Lorem ipsum dolor sit amet

  • Duis cursu mi quis viverra ornare

  • Suspendisse varius enim in eros elementum

Unordered List
  1. Lorem ipsum dolor sit amet

  2. Duis cursu mi quis viverra ornare

  3. Suspendisse varius enim in eros elementum

Quote
Block Quote – Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Text Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
radio button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Accordion
Adipiscing Egestas Tristique Purus

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.

containers
flex horizontal
flex vertical
padding
Large
Medium
Small
X Small
Margin
Large
Medium
X-Small
X-Small
position