• Skip to primary navigation
  • Skip to main content

Teach At Home

Ready • Set • Teach

  • Resources
    • Transition Tips
    • Curriculum Resources
    • Freebies
    • Newsletter
  • About
  • Blog
  • Shop
    • Cart
  • Get in Touch

Style Guide

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?

  1. Ordered list item #1
  2. Ordered list item #2
  3. 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

Arrow Left Arrow Right

Arrow Left Arrow Right

Large Default Small

Primary Primary Primary

Secondary Secondary Secondary

Light Light Light

CTA CTA CTA

Full Width

Full Width

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.

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.

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.

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.

Ready to Get Started?

Grow your library and build a sustainable plan for teaching at home.

Learn More   Get Started Today

© 2023 · TeachAtHome.School · Made with in Texas

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.Accept Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT