Equity Office Style Guide

Elements:

Colors

$color-primary

$color-primary-dark

$color-primary-light

$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.

P Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda delectus incidunt itaque iusto maxime

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 p is have a class p-small

The class is alredy created for uppercase text

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

Buttons

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.
  • undeorderlist with a class of list-without-dot
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Fields

Radio

Checkbox


Lightbox

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