The name of the class is in each row indicating the styles (color) that will be called based on applying that word as a class to an object.

green

alt-green

red

alt-red

orange

alt-orange

blue

alt-blue

purple

alt-purple

gray

alt-gray

H1: page headers


H2: section headers; accordion headers.


H3: Paragraph subheads; usually has color applied.


H4: intro text… see below.


H5: really small; think meta info for blogs, etc.

H6? We don’t have an H6 yet.

Unordered Lists:

  • Lorem ipsum dolor sit amet
  • li class=”red”
  • Morbi vel euismod purus
  • Sed efficitur nisi.

Ordered Lists:

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Morbi vel euismod purus
  4. Sed efficitur nisi.

examples in action…

H3, used for paragraph headers

e.g. <h3 class="red">red</h3>

red

orange

green

blue

purple

gray

h4, this is intro text for a section:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi.

Buttons

btn-purple

 class="btn btn-primary btn-purple"

Change the color of the rest- and hover-state of buttons.
eg:
Learn More ↓

padding

padding-left

(or padding-right)

quickly add consistent, standard, responsive padding based on direction. (only seen for devices larger than mobile)

Hiding for mobile

hide-mobile
hides for devices narrower than 768px.

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

middle school student

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

A Blue header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel euismod purus, sed efficitur nisi. Sed commodo felis vel leo mattis, at scelerisque nibh commodo. Ut nulla tortor, fringilla sed nibh et, elementum viverra dolor. Integer vitae leo diam. Morbi a consequat lectus. Phasellus blandit porttitor nibh, vel accumsan metus euismod vitae. Cras mattis purus sapien, vel dictum elit condimentum at. Sed semper suscipit ligula ac suscipit. Donec blandit posuere nulla, non consectetur orci accumsan non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Page Components

Text squares

Uses “square” shortcode that encapsulates the following with left and right brackets:
[square header="High School Placement" text="Learn More" link="/middle-school/#high-School-counseling-placement" color="orange"]

A positive equation for achievement.

Be part of the positive equation.

Let's Connect