Style Guide

This project is made with Wizardry Fluid Responsive Method

Wizardy Method Setup
- Method: Desproportional Scaling
- Scale Direction: Scale up
- Design width: 1440px
- Max-width: 1920px

Typography

Headings

Element

All H1

/ On design 70/72

Element

All H2

Element

All H3

Element

All H4

Element

All H5

Element

All H6

Class

heading-1

/ On design 70/72

Class

heading-2

/ On design 60px

Class

heading-3

/ On design 50px

Class

heading-4

/ On design 35px

Body

paragraph-lg

On design 24px/36px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-md

On design 20px/30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph

/ On design 18px/27px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-sm

/ On design 16px/24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

subheading

lorem ipsum

meta

Lorem Ipsum

All Ordered Lists

Example Ordered List
Example Ordered List

heading-number

/ On design 300px

28K+

Text Modifiers

The styles are set inside the [Global CSS] symbol. Use this as combo classes to prevent extra clases when the weight varies between body texts

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

u-text-light

/

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

u-text-regular

/

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

u-text-medium

/

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

u-text-semibold

/

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

u-text-bold

/

Color

Background

Dark Blue

#192d38

u-bg-darkblue

Mid Blue

#003366

u-bg-midblue

Mid Blue 2

#003366

u-bg-midblue2

Blue

#1a6cb2

u-bg-blue

Yellow

#ffcc00

u-bg-yellow

Black

#1d1c1a

u-bg-black

Neutral 1

#192d38

u-bg-neutral1

Neutral 2

#495961

u-bg-neutral2

Neutral 3

#83929b

u-bg-neutral3

Neutral 4

#bfc9d0

u-bg-neutral4

Neutral 5

#ecf2f6

u-bg-neutral5

White

#ffffff

u-bg-white

Text

Aa

Dark Blue

#192d38

u-text-darkblue

Aa

Mid Blue

#003366

u-text-midblue

Aa

Mid Blue 2

#10467c

u-text-midblue2

Aa

Blue

#0578be

u-text-blue

Aa

Yellow

#ffcc00

u-text-yellow

Aa

Black

#1d1c1a

u-text-black

Aa

Neutral 1

#192d38

u-text-neutral1

Aa

Neutral2

#495961

u-text-neutral2

Aa

Neutral 3

#495961

u-text-neutral3

Aa

Neutral 4

#bfc9d0

u-text-neutral4

Aa

Neutral 5

#ecf2f6

u-text-neutral5

Aa

White

#FFFFFF

u-text-white

Components

Buttons

Default

btn

Secondary

btn

cc-secondary

Text Link

All Links

Default Light

btn

cc-light

Secondary Light

btn

cc-secondary

cc-light

Text Link Light

u-text-white

Cta

btn-cta_component

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Cards

Icons

Utilities

Margin

Top

u-mt-0

margin-top: 0;

u-mt-1

margin-top: 1em;

u-mt-auto

margin-top: auto;

Bottom

u-mb-0

margin-bottom: 0;

u-mb-1

margin-bottom: 1em;

Other

u-m-0

margin: 0;

u-mlr-auto

margin: 0 auto; (centers element))

Padding

Top

u-pt-0

padding-top: 0;

Bottom

u-pb-0

padding-bottom: 0;

Other

u-p-0

padding: 0;

Alignment

u-text-center

text-align: center;

u-text-right

text-align: right;

Overflow

u-overflow-hidden

overflow: hidden;

u-overflow-visible

overflow: visible;

Display + position

u-d-none

display: none;

u-d-block

display: block;

u-d-flex

display: flex;

u-position-relative

position: relative;

Size

u-w-100

width: 100%;

u-h-100

height: 100%;

Helpers

u-img-cover

Multiple properties

u-link-cover

Multiple properties

u-aspect-1x1

Multiple properties

u-z-index-1

Multiple properties

Max Widths

u-max-w-25

u-max-w-26

u-max-w-27

u-max-w-28

u-max-w-30

u-max-w-31

u-max-w-32

u-max-w-33

u-max-w-34

u-max-w-35

u-max-u-36

u-max-w-37

u-max-w-38

u-max-w-39

u-max-w-40

u-max-w-41

u-max-w-42

u-max-w-43

u-max-w-44

u-max-w-45

u-max-w-46

u-max-w-47

u-max-w-48

u-max-w-49

u-max-w-50

u-max-w-51

u-max-w-52

u-max-w-full

Layout

Section

section

Container

container

Grid System

grid12-cgap

12 columns - Utility Class on custom code

grid12-nogap

12 columns - grid-row-gap: 0;

Row

col

col

col

col

col

col

col

col

col

col

Row - Desktop

col

col-lg-1

col

col-lg-11

col

col-lg-2

col

col-lg-10

col

col-lg-3

col

col-lg-9

col

col-lg-4

col

col-lg-8

col

col-lg-5

col

col-lg-7

col

col-lg-6

col

col-lg-6

col

col-lg-12

Row - Tablet

col

col-md-1

col

col-md-11

col

col-md-2

col

col-md-10

col

col-md-3

col

col-md-9

col

col-md-4

col

col-md-8

col

col-md-5

col

col-md-7

col

col-md-6

col

col-md-6

col

col-md-12

Row - Mobile Landscape

col

col-sm-1

col

col-sm-11

col

col-sm-2

col

col-sm-10

col

col-sm-3

col

col-sm-9

col

col-sm-4

col

col-sm-8

col

col-sm-5

col

col-sm-7

col

col-sm-6

col

col-sm-6

col

col-sm-12

Row - Mobile Portrait

col

col-xs-1

col

col-xs-11

col

col-xs-2

col

col-xs-10

col

col-xs-3

col

col-xs-9

col

col-xs-4

col

col-xs-8

col

col-xs-5

col

col-xs-7

col

col-xs-6

col

col-xs-6

col

col-xs-12

Align columns

row

row-align-center

col

col

col

row

row-align-end

col

col

col

Justify columns

row

row-justify-end

col

col

row

row-justify-center

col

col

row

row-justify-around

col

col

row

row-justify-between

col

col

Reorder columns

col

col-lg-first

col

col-md-first

col

col-sm-first

col

col-xs-first

col

col-lg-last

col

col-md-last

col

col-sm-last

col

col-xs-last

Other columns modifiers

Shrink Column

col

col-shrink

col

Gutterless Column

row

row-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters

col

col-no-gutters