STYLE GUIDE

Main Grid

Main Container

Headings

All Heading

All Heading - H1

All Heading - H2

All Heading - H3

All Heading - H4

All Heading - H5

All Heading - H6

Heading Styles

Heading - H1

Heading - H2

Heading - H3

Heading - H4

Heading - H5

Heading - H6

All Html Tags

All Paragraphs

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links

All Ordered List

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

All Unordered List

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

Buttons

Primary Button

Secondary Button

Background Colours

Brand

Doctor

Dark

Text Size

Text XLarge

This is some text inside of a div block.

Text Large

This is some text inside of a div block.

Text Medium

This is some text inside of a div block.

Text Small

This is some text inside of a div block.

Text Xsmall

This is some text inside of a div block.

Text Style

Text Strikethrough

This is some text inside of a div block.

Text Italic

This is some text inside of a div block.

Text Caps

This is some text inside of a div block.

Text Nowrap

This is some text inside of a div block.

Text Weight

Weight 800

This is some text inside of a div block.

Weight 700

This is some text inside of a div block.

Weight 600

This is some text inside of a div block.

Weight 500

This is some text inside of a div block.

Weight 400

This is some text inside of a div block.

Text Alignment

Text Align Left

This is some text inside of a div block.

Text Align Center

This is some text inside of a div block.

Text Align Right

This is some text inside of a div block.

Text Colors

Text Color Black

This is some text inside of a div block.

Text Color White

This is some text inside of a div block.

Text Color Gray

This is some text inside of a div block.

Useful Elements

Hide

Hide on All screen

Overflow Hidden

Overflow Auto

Overflow Visible

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Bold text

Emphasis

^Superscript

_Subscript