This page demonstrates the various style elements and calls-to-action as dictated by the current brand style guidelines of TeachAtHome.school. This paragraph uses the intro class

Color and its use throughout a website is a crucial part of the branding puzzle. Use the following colors, and the following colors only throughout this site.

#e13239
.redd

#bfdae5
.sky

#eecb25
.pencil

#1a1a1a
.night

#ffffff

#272360
.bluee

Brighter colors should only be used in moderation and when drawing attention to specific calls-to-action.

Typography is among the most important of elements in any web design. This is why the utmost of care must be taken when crafting the style of each typographic element.

Perhaps you’d like to see what an unordered list looks like?

Unordered list item #1
Unordered list item #2
Unordered list item #3

Or you’d prefer to see what an ordered list looks like?

Ordered list item #1
Ordered list item #2
Ordered list item #3

Heading 1: The quick brown fox

Heading 2: Jumps over the lazy dog

Heading 3: Two driven jocks help

Heading 4: Fax my big quiz

Heading 5: Pack my box with

Heading 6: Five dozen liquor jugs

Typical body text: The job requires extra pluck and zeal from every young wage earner.

Quoted text: Waltz, bad nymph, for quick jigs vex.

Calls to action are critical if you want to move people to action. Here’s the various kinds found on this site:

Arrow Left Arrow Right

Large Default Small

Primary Primary Primary

Secondary Secondary Secondary

Light Light Light

CTA CTA CTA

Full Width

To create one of these nice calls to action it’s as easy as:

<a href="LINK" class="CLASSNAME">YOUR TEXT</a>

Special text blocks may be needed at times to draw extra attention to give specific notes or add typographic emphasis. Here are the various special text blocks:

This paragraph uses the .message class which allows you to create special message boxes. Use the color classes to change it’s color if you like. Just make sure you check on how links look.

Cards
This special text block is created with the class .card. This will be used on any sort of item you want to place is a small, flexible box.
Download

Flexible
By “flexible” I mean that you can place multiple cards inside of a .flex-wrapper element and have multiple boxes fit automatically.
Download

Intelligent
The boxes will intelligently fit to the area with a maximum number of 3 boxes per row. On mobile, it will automatically adjust so they’re never too narrow.
Download

And when you need to create one of these beautifully designed special blocks, this is all the code you need:

<div class="CLASSNAME">YOUR CONTENT GOES IN THIS AREA RIGHT HERE.</div>

Horizontal rule is the subtle divider line used to break up sections of text. You can see it used throughout this page to separate each section.

Simply place <hr /> between a paragraph and you’ve got yourself a beautiful divider line.

Below is a display of typographical elements in a more natural hierarchy.

The Quick Brown Foxs Jumps Over the Lazy Dog

Jaded zombies acted quaintly but kept driving their oxen forward.

The job requires extra pluck and zeal from every young wage earner. A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.

Style Guide