Menu Icons These are the standard icons and colors for menus in the product

A few tips for using icons for menu items

  • Make sure to   before text to separate icon from text
  • Add fa or ace-icon before each icon
  • Apply the appropriate color for the icon

Colors These are class names that can be used to change color of an element

dark

light

default

white-opaque

white

dark-opaque


brand-primary

blue

light-blue

dark-blue

blue2


teal

light-teal

brand-info


brand-success

green

light-green

dark-green


brand-danger

red

dark-red

light-red


brand-warning

orange

light-orange

dark-orange


gray

grey-dark

grey-darker

grey-darkest

grey-light

grey-lighter

light-grey

grey-lightest

Horizontal Lines

Horizontal Row
HR Double
HR Dotted
HR on Left
HR on Right

Horizontal Spacing

Spans spacing from 2 - 32 by groups of 2. This is just a few examples of the spacing.

Spacing 32
hr hr-32
Spacing 16
hr hr-16
Spacing 8
hr hr-8
Spacing 4
hr hr-4

Spacing Use these classes to add spacing between elements

Top & Bottom Margin

Number is px margin top and bottom

Space
space

Space-2
space

Space-4
space-4

Space-8
space-8

Space-16
space-16

Space-32
space-32

....etc space every 2px from 2 to 32

Right & Left Margin

Number is px margin on left or right



Sizing Making elements bigger or smaller than standard size

% bigger in increments of 5


.bigger-110
.bigger-120
.bigger-125
.bigger-150
.bigger-175
.bigger-200
.bigger-225
.bigger-250
.bigger-275
.bigger-300

Number is % smaller


.smaller-90
.smaller-80
.smaller-75
.smaller-60
.smaller-50
.smaller-40
.smaller-30
.smaller-25
.smaller-15
.smaller-10

Number is % of total in increments of 5