Facebook

CSU Shiley Haynes Institute Styleguide

Typography, Colors, and UI Elements

version 1.0

Typography

H1 Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec

H2 Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec

H3 Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec

H4 Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec

H5 Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec
H6 Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec

Paragraph Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec. Nullam condimentum leo id elit sagittis auctor. Curabitur elementum nunc a leo imperdiet, nec elementum diam elementum. Etiam elementum eriuismod commodo. Prion elefend eget quam ut efficiur.

.small Paragraph Fusce at nisi eget dolor rhoncus facilisis mauris ante nisl consec. Nullam condimentum leo id elit sagittis auctor. Curabitur elementum nunc a leo imperdiet, nec elementum diam elementum. Etiam elementum eriuismod commodo. Prion elefend eget quam ut efficiur.

Color Palette

#094A6A
bg-secondary

#9fD4e8
bg-primary

#F8F3E9
bg-info

#032231
bg-dark

#2f2f2f
bg-danger

#CC0B2A
bg-warning

#28a745
.bg-success

UI Elements
Big Buttons
Default State
EXPLORE OUR COURSES
Hover State
.btn-primary
Small Buttons
Default State
EXPLORE OUR COURSES
Hover State
.btn-secondary
Big Text Links
Default State
LOAD MORE
Hover State
LOAD MORE
Small Text Links
Default State
LEARN MORE
Hover State
LEARN MORE
Animations
Animate text one word at a time using the .wordAnimate class on the HTML tag.

Fade elements with the data-aos="fade" attribute.

Fade elements from left with the data-aos="anim-from-left" attribute.

Fade elements from bottom with the data-aos="anim-from-bottom" attribute.