Paragraphs

This is a default paragraph. It has a font-size of 1em, a line-height of 1.4em, a margin-top of 0.4rem and a margin-bottom of 0.7rem. The default font-size and line-height can be changed by setting the $default-font-size and $default-line-height in the grid variables file.

According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

• <p>This is a default paragraph. It has a font-size of 1em, a line-height of 1.4em, a margin-top of 0.4rem and a margin-bottom of 0.7rem. The default font-size and line-height can be changed by setting the <code>$default-font-size</code> and <code>$default-line-height</code> in the grid variables file.<p>

Variations

By size:

This paragraph has a 2x large font size.

This paragraph has an extra large font size.

This paragraph has an extra large font size.

This paragraph has a small font size.

This paragraph has an extra small font size.

This paragraph has a 2x small font size.

• <p class="xxlarge">This paragraph has a 2x large font size.</p>
• <p class="xlarge">This paragraph has an extra large font size.</p>
• <p class="large">This paragraph has an extra large font size.</p>
• <p class="small">This paragraph has a small font size.</p>
• <p class="xsmall">This paragraph has an extra small font size.</p>
• <p class="xxsmall">This paragraph has a 2x small font size.</p>

By style:

This paragraph is bold.

This paragraph is italic.

• <p class="bold">This paragraph is bold.</p>
• <p class="italic">This paragraph is italic.</p>

By color:

This paragraph is lighter in colour than the default paragraph font. It is used for disclaimers and other places where the text is not as visually important as the surrounding text.

This paragraph is in the default mozo green colour.

• <p class="light">This paragraph is lighter...</p>
• <p class="green">This paragraph is in the default mozo green colour.</p>

Headers

Header Level 1

This is a paragraph after the H1 tag.

Header Level 2

This is a paragraph after the H2 tag.

Header Level 3

This is a paragraph after the H3 tag.

Header Level 4

This is a paragraph after the H4 tag.

Header Level 5

This is a paragraph after the H5 tag.

Header Level 6

This is a paragraph after the H6 tag.

• <h1>Header Level 1</h1>
• <h2>Header Level 2</h2>
• <h3>Header Level 3</h3>
• <h4>Header Level 4</h4>
• <h5>Header Level 5</h5>
• <h6>Header Level 6</h6>

Boxes

The default box on Mozo has a white background, 2px border bottom of color $swatch-border typically grey, and a padding of $gap-2.

• <div class="box">This is a simple box</div>

The default box's border can be overriden by using class 'no-border'.

• <div class="box no-border">This is a simple box without a border</div>

A more complex example is the 'box with image'. It is typically is for promotional content. The inner copy is offset by image padding.

People's Choice Award 2015

Forget industry awards where banks scratch each other's backs. Mozo presents the People's Choice Awards, based on more than 10,000 real customer reviews.

Check out the winners

• <div class="box box-w-img">
    <i class="fa fa-thumbs-o-up xxxlarge yellow"></i>
    <div class="push-img">
        <h2>Rate &amp; Review</h2>
        <p>See which insurers customers are rating and hating or join in on the conversation.</p>
        <p><a href="//mozo.com.au/rate-and-review" class="button btn-cta">Read reviews</a></p>
    </div>
</div>