Index

Typography

Headings

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you just want to show a bigger/smaller font size based on the heading, use class instead, e.g.: <div class="h1">.

<h1 class="h2">This is h1 with h2 size.</h1>
<h2 class="h1">This is h2 with h1 size.</h2>
<div class="h3">This is div with h3 size.</div>

This is h1 with h2 size.

This is h2 with h1 size.

This is div with h3 size.

Body

You need not add a paragraph tag, unless you’d like to create additional styles. When doing so, the html code is:

<p class="large">The electrons can move all around the material. Protons 
never move around a solid object because they are so heavy, at least 
compared to the electrons.</p>

<p>The electrons can move all around the material. Protons never move around 
a solid object because they are so heavy, at least compared to the electrons. 
A material that lets electrons move around is called a conductor. A material 
that keeps each electron tightly in place is called an insulator. Examples of 
conductors are copper, aluminum, silver, and gold. Examples of insulators are 
rubber, plastic, and wood. Copper is used very often as a conductor because it 
is a very good conductor and there is so much of it in the world. Copper is 
found in electrical wires. But sometimes, other materials are used.</p>

<p class="small">Inside a conductor, electrons bounce around, but they do 
not keep going in one direction for long. If an electric field is set up inside 
the conductor, the electrons will all start to move in the direction opposite to 
the direction the field is pointing (because electrons are negatively charged).</p>

The electrons can move all around the material. Protons never move around a solid object because they are so heavy, at least compared to the electrons.

A material that lets electrons move around is called a conductor. A material that keeps each electron tightly in place is called an insulator. Examples of conductors are copper, aluminum, silver, and gold. Examples of insulators are rubber, plastic, and wood. Copper is used very often as a conductor because it is a very good conductor and there is so much of it in the world. Copper is found in electrical wires. But sometimes, other materials are used.

Inside a conductor, electrons bounce around, but they do not keep going in one direction for long. If an electric field is set up inside the conductor, the electrons will all start to move in the direction opposite to the direction the field is pointing (because electrons are negatively charged).

List Item

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul class="no-indent">
    <li>Item 1 - No Indent</li>
    <li>Item 2 - No Indent</li>
    <li>Item 3 - No Indent</li>
</ul>

<ul class="list-arrow">
    <li>Item 1 - Arrow</li>
    <li>Item 2 - Arrow</li>
    <li>Item 3 - Arrow</li>
</ul>

<ul class="list-number">
    <li>Item 1 - Number</li>
    <li>Item 2 - Number</li>
    <li>Item 3 - Number</li>
</ul>
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 1 – No Indent
  • List Item 2 – No Indent
  • List Item 3 – No Indent
  • List Item 1 – Arrow
  • List Item 2 – Arrow
  • List Item 3 – Arrow
  • List Item 1 – Number
  • List Item 2 – Number
  • List Item 3 – Number

Styles

<span class="bold">Bold</span> or <strong>Strong</strong>
<span class="italic">Italic</span> or <em>Em</em>
<span class="small">Small</span>
<span class="big">Big</span>
<span class="serif">Serif</span>
<span class="sans">Sans-Serif </span>
<span class="serif bold">Bold Serif</span>
<span class="sans bold">Bold Sans-Serif</span>
Bold or Strong
Italic or Em
Small
Big
Serif
Sans-Serif
Bold Serif
Bold Sans-Serif

Colours

Text Colour

<div class="black">Black</div>
<div class="white">White</div>
<div class="navy-dark">Dark Navy</div>
<div class="navy">Navy</div>
<div class="navy-light">Light Navy</div>
<div class="grey-medium">Medium Grey</div>
<div class="grey">Grey</div>
<div class="grey-light">Light Grey</div>
<div class="green-dark">Dark Green</div>
<div class="green">Green</div>
<div class="blue-dark">Dark Blue</div>
<div class="blue">Blue</div>
<div class="blue-medium">Medium Blue</div>
Black
White
Dark Navy
Navy
Light Navy
Medium Grey
Grey
Light Grey
Dark Green
Green
Dark Blue
Blue
Medium Blue

Background Colour

<div class="bg-black">Black</div>
<div class="bg-white">White</div>
<div class="bg-navy-dark">Dark Navy</div>
<div class="bg-navy">Navy</div>
<div class="bg-navy-light">Light Navy</div>
<div class="bg-grey-medium">Medium Grey</div>
<div class="bg-grey">Grey</div>
<div class="bg-navy-light">Light Navy</div>
<div class="bg-green-dark">Dark Green</div>
<div class="bg-green">Green</div>
<div class="bg-blue-dark">Dark Blue</div>
<div class="bg-blue">Blue</div>
<div class="bg-blue-medium">Medium Blue</div>
Black
White
Dark Navy
Navy
Light Navy
Medium Grey
Grey
Light Grey
Dark Green
Green
Dark Blue
Blue
Medium Blue

Utils

Margin & Padding

To add margin/padding, add the following class:
.{m/p}{direction}-{number}
{m/p} m for margin and p for padding
{direction} is top(t), bottom(b), right(r), left(l)
{number} is 0, 5, 10, up to 100

<div class="mb-5">margin-bottom: 5px</div>
<div class="mt-10">margin-bottom: 10px</div>
<div class="pr-15">padding-right: 15px</div>

Buttons

<a class="button small">Small</a>
<a class="button">Normal</a>
<a class="button large">Large</a>
<a class="button full-width">Full Width</a>
Small
Normal
Large
Normal
Full Width
<a class="button arrow__down">Arrow Down</a>
<a class="button arrow__right">Arrow Right</a>
Arrow Down
Arrow Right
<a class="button btn-green">Green</a>
<a class="button btn-blue">Blue</a>
<a class="button btn-navy">Navy</a>
<a class="button btn-blue-gradient">Blue Gradient</a>
<a class="button btn-blue-gradient-light">Blue Gradient Light</a>
<a class="button btn-outline-navy">Outline Navy</a>
<a class="button btn-outline-white">Outline White</a>
Green
Blue
Navy
Blue Gradient
Blue Gradient Light
Outline Navy
Outline White
<a class="link" href="#">Normal Link</a>
<a class="link arrow-left" href="#">Arrow Left</a>
<a class="link arrow-right" href="#">Arrow Right</div>
<a class="link arrow-up" href="#">Arrow Up</div>
<a class="link arrow-down" href="#">Arrow Down</div>
<a class="link chevron-left" href="#">Chevron Left</a>
<a class="link chevron-right" href="#">Chevron Right</div>
<a class="link chevron-up" href="#">Chevron Up</div>
<a class="link chevron-down" href="#">Chevron Down</div>
Normal Link
Arrow Left
Arrow Right
Arrow Up
Arrow Down
Chevron Left
Chevron Right
Chevron Up
Chevron Down

Shortcodes

Accordion

[accordion multi_expand="false" all_closed="false" class="mb-50"]
    [accordion_item open="false" title="1st Accordion"]This is the first accordion[/accordion_item]
    [accordion_item open="true" title="2nd Accordion"]This is the second accordion[/accordion_item]
    [accordion_item open="true" title="3rd Accordion"]This is the third accordion[/accordion_item] 
[/accordion]