Using the HTML
Bootstrap
Global Classes
View the text and buttons colours guidelines in order to use the global classes appropriately.
Background Colours
Primary
.bg-primary
Secondary
.bg-secondary
Accent
.bg-accent
White
.bg-white
Light Gray
.bg-light-gray
Text Colours
All branding colours can be used as text colours, but we recommend using only the below:
Primary
.text-primary
Blue 900
.text-blue-900
White
.text-white
Gray 300
.text-gray-300
Gray 700
.text-gray-700
Black
.text-black
Medicover Red
.text-red
Error Light
.text-error-light
Error Dark
.text-error-dark
Borders
Use .border combined with a class below:
Blue
.border-blue
Gray
.border-gray
Yellow
.border-yellow
Border Radius
8px
.rounded-1
16px
.rounded-2
20px
.rounded-3
Header Underlines
Use .underlined combined with a class below:
Blue
.underlined-blue
Use
On all backgrounds except secondary
Yellow
.underlined-yellow
Use
Only on light gray and secondary backgrounds
Padding
Use .extra-padding to add extra spacing inside an element