Grid System

The table of grid system sizes

Device Width

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1200px

100%

100%

100%

Spacing System

Spacing - Desktop

120 px

50 px

120 px

- Paddings Tops and Bottom for blocks - 120 px
- Inside of Blocks (between headlines and inside a content block) - 50px

Spacing - Tablet

90 px

50 px

90 px

- Paddings Tops and Bottom for blocks - 90 px
- Inside of Blocks (between headlines and inside a content block) - 50px

Spacing - Mobile

70 px

40 px

70 px

- Paddings Tops and Bottom for blocks - 70 px
- Inside of Blocks (between headlines and inside a content block) - 40px

Color Palette

Primary

#0f7dcc

#eaf7ff

#222222

#ff9c81

Secondary

#ffffff

#f9f9fa

#e9e9e9

#999999

#000000

Typography

Headers - Desktop

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headers - Tablet

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headers - Mobile

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Links

Link With Icon
+ READ MORE

List

  • List item
  • List item
  • List item
  • List item

Buttons

Primary Coral Button
donate now
Primary Button Blue
DOnate now
Blue Button
Button Text
The Hapi services are not intended to be medical, behavioral health or other healthcare service nor should any users, including Talkers and Listeners, treat them as such. Our Services are not intended to be a substitute for professional medical advice or treatment. You should always seek the advice of your physician or other qualified healthcare professional with any questions you may have regarding a medical condition or treatment. You should never disregard professional medical advice or delay in seeking medical advice or treatment because of our Services. If you think you may have a medical emergency, contact 911, or if you are experiencing thoughts of harming yourself or others, call 988.