Style Guide For Classic Rehabilitation, Inc

Branding

Colors

Color Swatches

  • #38803f
  • #262675
  • #3e3e3e
  • #e6e6e6
  • #ffffff

Color Palettes

  • #3e8b3f
  • #50ae40
  • #38803f
  • #524c4c
  • #282626
  • #3e3e3e
  • #3332a8
  • #18184f
  • #262675
  • #f9f7f7
  • #ff9600
  • #e6e6e6
  • #fff

Typography

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

Intro

This is an introduction text. Lorem ipsum dolor sit amet, consectetur adipiscing elt. Cras dapibus vulputate diam eu pretium.

Text

This is text XXS

This is text XS

This is text base

This is text regular

This is text medium

Links

Link Here Link Text

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Buttons

<button class="btn">Normal</button>

<button class="btn btn-rounded">Rounded Button</button>

Icons

Form

List

Basic List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Flush List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Plain List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Tight Spacing Between

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

No Space Between

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Inline List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Style Position Inside

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Facts

There are 6 text colors possible for the first p

  • Green Text: .green-text
  • Blue Text: .blue-text
  • Black Text: .black-text
  • Light Black Text: .light-black-text
  • White Text: .white-text
  • Green BG: .green-bg
  • Blue BG: .blue-bg
  • Black BG: .black-bg
  • White BG: .white-bg

Font

h1,h2,h3,h4 font-family: 'Poppins', sans-serif;

h5,h6 font-family: 'Poppins', sans-serif;

p font-family: 'Poppins', sans-serif;

Button, a, ul, li, blockquote, span font-family: 'Poppins', sans-serif;

Accordian

Accordian Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordian Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordian Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordian Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Two Box Layout

Three Box Layout

Four Box Layout