Base Template Style Guide

Styleguide created for purpose to represet individual component available for use.

01 Headings

This is an H1 45px medium tag with a link.

This is an H2 30px medium tag with a link.

This is an H3 22px medium tag with a link.

This is an H4 20px medium tag with a link.

This is an H5 14px medium tag whit a link.
This is an H6 12px medium tag with a link.
This is an H7 14px regular tag with a link.

02 Typography

Effra light - $f-stack-effra - $fw-light

The quick brown fox jumps over the lazy dog

Effra regular - $f-stack-effra - $fw-normal

The quick brown fox jumps over the lazy dog

Effra medium - $f-stack-effra - $fw-medium

The quick brown fox jumps over the lazy dog

Effra bold - $f-stack-effra - $fw-bold

The quick brown fox jumps over the lazy dog

03 Colors

Dark

#1b2233

$c-dark

Marine

#051a52

$c-marine

Dark Slate Blue

#243668

$c-c-dark-slate-blue
$secondary-color

Clear Blue

#2957ff

$c-clear-blue
$primary-color

Duck Egg Blue

#edfbf7

$c-duck-egg-blue

Orangey Red

#f84e34

$c-orangey-red

Very Light Pink

#feedec

$c-very-light-pink

Black

#000

$c-black

Charcoal

#373a35

$c-charcoal

Battleship Gray

#767a84

$c-battleship-gray

Steel

#868790

$c-steel

Cool Gray

#a9b0b5

$c-cool-gray

Cool Gray Two

#bbbcc2

$c-cool-gray-two

Pinkish Gray

#c4c4c4

$c-pinkish-gray

Cloudy Blue

#ccd8df

$c-cloudy-blue

Pale Gray 7

#eff3f5

$c-pale-gray7

Pale Gray 6

#f5f5f5

$c-pale-gray6

Pale Gray 5

#dbdbdb

$c-pale-gray5

Pale Gray 4

#e6e6e6

$c-pale-gray4

Pale Gray 3

#e1e8ec

$c-pale-gray3

Pale Gray 2

#e0efeb

$c-pale-gray2

Pale Gray

#f0f3f5

$c-pale-gray

White

#fff

$c-white

04 Buttons

       

05 Input fields

This is a required field.
This is a required field.
This is a required field.
This is a required field.

Quantity Selector

Please enter a valid number in this field.

Radio Buttons

Checkboxes

06 Other

Arrows

.arrow-up
.arrow-right
.arrow-down
.arrow-left

Triangles

.triangle-up
.triangle-down

Loader

.loading-icon