Client First Style System

HTML Headings

Title text

Title text

Heading 1 - Default

Heading 1

Heading 2 - Default

Heading 2

Heading 3 - Default

Heading 3

Heading 4 - Default

Heading 4
Heading 5 - Default
Heading 5

Heading classes

Title text

Heading style-h1

Heading style-h2

Heading style-h3

Heading style-h4

Heading style-h5

HTML Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

All Paragraphs (HTML Tag)
Text Link
All Links (HTML Tag)
Block Quote
Block quote (HTML Tag)
  • No bullet list

  • No bullet list

  • Unordered list

  • Unordered list

  1. Ordered list

  2. Ordered list

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-tiny

Text weights

Phasellus a nulla in neque lacinia posuere.
text-weight-extrabold
Phasellus a nulla in neque lacinia posuere.
text-weight-bold
Phasellus a nulla in neque lacinia posuere.
text-weight-semibold
Phasellus a nulla in neque lacinia posuere.
text-weight-medium
Phasellus a nulla in neque lacinia posuere.
text-weight-normal

Text styles

Phasellus a nulla in neque lacinia posuere.
text-style-italic
Phasellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phasellus a nulla in neque lacinia posuere.
text-style-allcaps
Phasellus a nulla in neque lacinia posuere.
text-style-muted
Phasellus a nulla in neque lacinia posuere.
text-style-nowrap
Phasellus a nulla in neque lacinia posuere.
text-style-quote
Click to see more
text-style-link

Text aligns

Phasellus a nulla in neque lacinia posuere.
text-align-left
Phasellus a nulla in neque lacinia posuere.
text-align-center
Phasellus a nulla in neque lacinia posuere.
text-align-right

Rich text

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  • Bullet point one
  • Bullet point two

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

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

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  1. Numbered list one
  2. Numbered list two
Rich text heading
Rich text heading

Colors

Primary | Blue - #0FA0E3
Primary | Black - #222222
Full White - #FFFFFF

Background colors

Background Color - Primary Blue
Background Color - Full White

Greyscale

Greyscale 1
Greyscale 2
Greyscale 3
Greyscale 4
Greyscale 5
Greyscale 6
Greyscale 7
Full White - #ffffff

Text colors

Phasellus a nulla in neque
text-color-primary
Phasellus a nulla in neque
text-color-lighter-blue
Phasellus a nulla in neque
text-color-grey
Phasellus a nulla in neque
text-color-grey-2
Phasellus a nulla in neque
text-color-white

Icon classes

icon-small
icon-medium
icon-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Social icons

Form example

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Margin

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Padding

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all

Max width

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait

Useful globals