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