Australian Accounting & Business Consultancy Firm | Ballarat Accountants & Gisborne Accountants Style Guide

Elements:

Colors

$color-primary

$color-primary-light

$color-primary-green

$color-secondary

$color-secondary-dark

$color-secondary-light


Typography

H1 This is a heading.

H2 This is a heading.

H2--light This is a light variant heading.

H3 This is a subheading.

H4 This is a heading.

H5 This is a heading.
H6 This is a heading.

Body text morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pretium sapien vel eros condimentum imperdiet. Nulla facilisi. Morbi sed lacus varius, tristique eros non, pulvinar diam. Donec et eleifend orci. Ut eget porttitor felis, nec accumsan sem.

Body text 60% opacity morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pretium sapien vel eros condimentum imperdiet. Nulla facilisi. Morbi sed lacus varius, tristique eros non, pulvinar diam. Donec et eleifend orci. Ut eget porttitor felis

Bold Text

The Lead paragraph is a paragraph that is slightly larger than the rest of the content. Often it is the first paragraph of a post.

"This is a quote"
A link, Hover + Visited

Buttons



Watch video Watch video

Lists

  • Unordered List
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  1. Ordered List
  2. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  3. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Fields

Radio

Checkbox



Lightbox

Watch video Watch video

Animation

  • FadeIn
    .js-animation-fadeIn
  • FadeInUp
    .js-animation-fadeInUp
  • FadeInDown
    .js-animation-fadeInDown
  • FadeInLeft
    .js-animation-fadeInLeft
  • FadeInRight
    .js-animation-fadeInRight
  • FadeInTopLeft
    .js-animation-fadeInTopLeft
  • FadeInTopRight
    .js-animation-fadeInTopRight
  • FadeInBottomLeft
    .js-animation-fadeInBottomLeft
  • FadeInBottomRight
    .js-animation-fadeInBottomRight

Google Map