Home Style Guide

Style Guide

Colors

$magenta
#dc3996
$green
#90c73e
$orange
#ffa53a
$red
#F71F4A
$black
#000000

$extra-light-grey
#F1F1F1
$light-grey
#E6E6E6
$medium-grey
#CCC
$dark-grey
#7f7f7f
$super-dark-grey
#444444

Typography

Header Level 1

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Header Level 2

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Header Level 3

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Header Level 4

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Header Level 5

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Header Level 6

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Read More Link

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

Read More

Lists

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

  • List item 1
  • List item 2
    • Nested List Item 1
    • Nested List Item 2
  • List item 3

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.

  1. Ordered list item 1
  2. Ordered list item 2
    1. Nested List Item 1
    2. Nested List Item 2
  3. Ordered list item 3

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur corporis eaque enim eum fugiat fugit labore magnam molestiae nemo numquam, perferendis quae quam qui quo rerum sunt ullam velit.


Alerts and Notifications

Flash Messages

Notice message

Errors

  • This is an error message

Buttons


Sizes






Forms









No File Selected


Icons

All icons are using FontAwesome. Hover for class name.


Pre-styled


Common