Typography and colours
On this page
Abbreviation
HTML is the primary language for writing web pages
Blockquotes
With image
This is just some text - RT
Without image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis ex tempor gravida dignissim. Ut id purus sed nibh vehicula sollicitudin at quis lorem. - Colonel Mustard, eHealth NSW
Buttons
Colours
black
grey01
navy-blue-tint
grey
light-grey-shadow
light-grey-tint
light-grey
slight-grey-tint
white
blue
blue-tint
blue02
teal
light-blue
blue03
light-blue-tint
slight-blue-tint
blue04
red
orange-tint
green
Headings
Heading 1
Font size: 2.25rem (36px) / 3rem (48px)
Line height: 2.8125 (45px) / 3.75 (60px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Line height: 2.8125 (45px) / 3.75 (60px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Heading 2
Font size: 1.75em (28px) / 2rem (32px)
Line height: 2.1875 (35px) / 2.5 (40px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Line height: 2.1875 (35px) / 2.5 (40px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Heading 3
Font size: 1.375rem (22px) / 1.5rem (24px)
Line height: 1.72rem (27.5px) / 2rem (32px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Line height: 1.72rem (27.5px) / 2rem (32px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Heading 4
Font size: 2.25rem (18px) / 3rem (20px)
Line height: 1.5rem (24px) / 1.75rem (28px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Line height: 1.5rem (24px) / 1.75rem (28px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Heading 5
Font size: 1rem (16px) / 1rem (16px)
Line height: 1.5rem (24px) / 1.5rem (24px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Line height: 1.5rem (24px) / 1.5rem (24px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Heading 6
Font size: 1rem (16px) / 1rem (16px)
Line height: 1.5rem (24px) / 1.5rem (24px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Line height: 1.5rem (24px) / 1.5rem (24px)
Font weight: 600 (bold)
Margin top: 4rem (64px)
Labels
Text only
Information
Success
Warning
Error
With icons
Information
Success
Warning
Error
Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam veli
- Aenean sit amet erat nunc
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam veli
- Aenean sit amet erat nunc
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam veli
- Aenean sit amet erat nunc
Popovers
Information
Information
Progress line
Tooltip
Check out this tooltip This is the tooltip on top appearing above the text.
Check out this tooltip This is the tooltip on bottom appearing below the text.
Check out this tooltip This is the tooltip on the left appearing left of the text.
Check out this tooltip This is the tooltip on the right appearing right of the text.