Affordable Colleges Online Styleguide

NOTE: This styleguide has been revised on 11.14.2022.

Site Colors

Base Colors

Base colors are primary, secondary, tertiary, accent, and white. The lighter versions of these colors are primary-light, secondary-light, tertiary-light, and accent-light. These names can go with the property "theme" and can be used on a variety of components that take this property.

Components

SEO would like publishers to use as few components as possible. Try to avoid components wherever possible.

Accordions

Accordions are a big no-no and must be avoided. Because of this, sections that often used accordions, such as FAQs, need to use HTML.

For example:

FAQ

What is the proper way to display an FAQ?

This way!

What is the proper way to display an FAQ?

This way!

What is the proper way to display an FAQ?

This way!

You can also use the checklist component using the "question-mark-circle" icon, which would look better in mobile.

Boxed Content

Create boxes using HTML divs. There are different classes that can be used to make the box standout. Do not use the sonic-callout components to enclose content in boxes. Here are several classes you can use to make your boxes look interesting or stand out depending on what sort of information you want to encase. Remember to not use the boxes excessively and to only use it whenever you want information to stand out in some way.

Here are some options:

Biography

Biography components are not used as much as it used to be now that we have Contributor sections, but it is still used once in a while for some Q&A sections to introduce the interviewee before getting into the Q&A. Biography components may also be used to attribute people who have reviewed the content in some way but are not part of the EDU Contributors section. The preferable way to showcase the biography is to put it with gray fullwidth background with the color of the biography background be white.

Thomas Broderick

Thomas Broderick is a freelance writer and the owner of Broderick Writer LLC. He creates study guides, informational websites, and blog posts for clients in the education field. Thomas is also a published author of over 20 short stories and a member of the Science Fiction & Fantasy Writers of America.

Blockquotes

This is what the general blockquote component looks like:

The quote should not be displayed like the above unless the quote is SUPER important. If not, use the following options instead:

Pull Quotes.

Buttons

Buttons take base colors.

Lists

For some reason, the bullets and numbers don't come out for the unordered and ordered lists, so there is a ticket that has been put in about that, but if you see the bullets and numbers down here, you will see that the issue has been resolved.

Unordered List

• LIST
• LIST
• LIST
• LIST

Ordered List

For some reason, the ordered lists do not indent automatically. If you want the indent, you should put padding-left for about 1 or 2em.

1. LIST
2. LIST
3. LIST
4. LIST

List with Icon

• LIST
• LIST
• LIST
• LIST

Checklist

There are regular checklists and numbered checklists. Header text sizes (data-text) and icon sizes (data-size) can be controlled with "small, medium, large." Color can also be controlled (data-color). Different icons can be substituted instead of a check for the checklist.

Regular Checklist

Numbered Checklist

Numbered Alternative

Sonic-checklists are best used when there are several items that have a header with one block of paragraph description. If there is more than one paragraph, the component makes the space between paragraphs tighter, making it look off from the rest of the page. If you would like to use a numbered list like the above without the weird spacing issues, just use this code for the numbers instead:

1 Introduction to Psychology

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Checklist With A Different Icon

NOTE: Never use various icons for one checklist.

Editorial Listing

Editorial Listings (EL) are expected to be placed about one-third of the way down the page. No need to worry too much about the placement. If it is placed in the wrong place, someone (probably SEO) will put it in the right place. SEO wants a header to go with the EL. ELs pull its information from the DCS (Degree-Category-Subject) box in the backend, so make sure that the right inputs are put in there (or something close to it) to get the right kinds of ads there.

The Top Whatever Program

Icons

Icons that can be used can be found at the Heroicons website. Technically, icons can be inserted almost anywhere, but should be used with discretion. Only use to highlight information and for the sole purpose of making it easier for users to spot and pick out certain types of info.

Icon Size Manipulation

Icon sizes can be changed. There is extra small (x-small), small, medium (default), large, and extra large (x-large).

Icon Percentage

These are hardly used, but there is this option of using the icons.

Icon percentages take base colors.

Columns

Columns can be used on a number of components such as interlinks, any kind of box, buttons, etc. Three columns are the best, but on rare occasions, if there is a lot of information, four can be used.

3 Columns

4 Columns

Interlinks

Interlinks are used to direct users to pages within the site. An image can be added to it using the cloudinary link of the hero image of the page. Interlinks take base colors.

Interlinks with Base Colors

With Image

Without Image

Resource List

Resource lists can be used for any list of resources with a description blurb. Examples of these often come with certificates, organizations or lists of financial aid/scholarships. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris a diam maecenas sed enim ut sem viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris a diam maecenas sed enim ut sem viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris a diam maecenas sed enim ut sem viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris a diam maecenas sed enim ut sem viverra.

Cards

As an alternative to interlinks or buttons, you can also use these cards:

You can adjust the color and size of the icon (small, large) and the icon itself.

To highlight some posts, these cards can be used.

On the downside, this card takes a little more work since it requires more information, and on ACO, it can only fit two columns across the page. You can manipulate the background color, but make sure it fits with the site colors.

Tabs

The use of tabs is somewhat discouraged because it doesn't translate so well visually on mobile, but there is the option of using this if one so chooses. Tabs can take a "horizontal" or "vertical" layout. Vertical layout is preferred. Use with discretion. Do not go haywire with its use.

Horizontal

Vertical

Table

Tables need the class "sonic-table" to function. Tables should only be used to display from a handful to a large amount of short information or data. A caption should always be used.

U.S. Map

State-by-state information and data can be displayed through this component. You can use this tool that was created to help make this map-making process easier.

Photo Collage

Photo collages can be used, but the Content Team needs to provide the images. Ideally, this would be used for blog or guide pages.

Visualization Opportunities

Charts

Charts can be done through Everviz. These include pie, bar, column, and line charts. Also have the ability to do a few special types of charts showing poll results, etc. Below are a few examples: