Helpful Typography Classes
<h1>I am a page header</h1>
Only use h1 for the page header
Example:
I am a page header
<h2>I am a sub-header</h2>
Use h2 for the page sub-header or main sections headers
Example:
I am a sub-header
<h3>I am a paragraph paragraph-header</h3>
Use h3 for paragraph headers
Example:
I am a paragraph header
<h4>I am a paragraph sub-header</h4>
Use h4 for paragraph sub-headers
Example:
I am a paragraph sub-header
<p class="strong">
Add class "strong" to make text bold. Equivalent to "font-weight: bold"
Example:
I am bold
<p class="underline">
Add class "underline" to make underline text. Equivalent to "text-decoration: underline"
Example:
I am underlined
<p class="italic">
Add class "italic" to make text italicised. Equivalent to "font-style: italic;"
Example:
I am italic
<p class="uppercase">
Add class "uppercase" to make text all-caps. Equivalent to "text-transform: uppercase;"
Example:
I am uppercase
<p class="text-center">
Add class "text-center" to center the text. Equivalent to "text-align: center;"
Example:
I am centered
<p class="gap-north">
or <p class="gap-south">
Add class "gap-north" or "gap-south" to add space on top or bottom of the text. Equivlant to "margin-top: 60px" or "margin-bottom: 60px".
<p class="gap-north-small">
or<p class="gap-south-small">
Add class "..-small" to add smaller space on top or bottom of the text. Equivlant to "margin-top: 30px" or "margin-bottom: 30px".
Example:
Paragraph 1 with no gaps
Paragraph 2 with north gap
Paragraph 3 with no gaps
Paragraph 4 with south small gap
Paragraph 5 with no gaps