Style Guide

- Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

This paragraph of text.

This line of text will render as underlined.

This line rendered as bold text.

This line rendered as italicized text.

".italic" will apply the same styles as <em>.

".uppercase" render as uppercase text.

".text-center" render as text align center.

- Hyperlink

- Lists

• This is a list.
• This is a list.
• This is a list.

1. This is a list.
2. This is a list.
3. This is a list.

- Color

Text color: <COLOR_CODE>

Background color: <COLOR_CODE>-bg

- Miscellaneous

-- Margin

Margin top 20: mt-20
Margin top 40: mt-40
Margin bottom 20: mb-20
Margin bottom 40: mb-40
Vertical margin top & bottom 20: my-20
Vertical margin top & bottom 40: my-40

-- Padding

Vertical padding top & bottom 20: py-20
Padding top 70: pt-70
Padding right 40: pr-40

-- Display & Flex

Display: d-flex
Display: d-inline-block
Display: d-block
Flex: flex-row
Flex: flex-column
Alignment: align-center

-- Lines

-- Borders

- Others

-- Custom Typography

".section-subheading" render as sub heading of articles

"Benefit" red text

-- Circle number with descriptions

IT DOESN’T COST MUCH

-- Image with caption

Caption here