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.
Style Guide
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:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vel euismod purus
- 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;
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"]
