ASO Styleguide

Updated November 16, 2022

AccreditedSchoolsOnline.org is an advertising-supported site. Featured or trusted partner programs and all school search, finder, or match results are for schools that compensate us. This compensation does not influence our school rankings, resource guides, or other editorially-independent information published on this site.

Are you ready to discover your college program?

Credit: Dmitry Volkov | iStock | Getty Images Plus

NOTE: This styleguide has been revised on 11.08.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.

Primary
#62758C

Primary-Light
#D0D6DD

Secondary
#C8431C

Secondary-Light
#F1C8BA

Tertiary
#B2D3D3

Tertiary-Light
#E8F2F2

Accent
#C7CA28

Accent-Light
#EEEFBF

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!


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:

Borders (border width: thin, thick)


Thin Border

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Thick Border

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


You can also color the borders.

Colored Border

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.



Box With Shadow (size: sm, md, lg)


Small Shadow

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Medium Shadow

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Large Shadow

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.



Colored Boxes

You can also make colored boxes. Use only the light version of the site's colors as well as gray-light. Use these lighter colors so that it does not hinder with the content's visibility. We don't want users to be straining their eyeballs to read the content.


Box Using Primary-Light

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Box Using Secondary-Light

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Box Using Tertiary-Light

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Box Using Accent-Light

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Box Using Gray-Light

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.



Rounded Corners (sm, md, lg)


Small Rounded Corners

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Medium Rounded Corners

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.


Large Rounded Corners

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

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.

Portrait of Thomas Broderick

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:


We believe in leaving the woodpile higher than we found it. We believe in being the change we wish to see in the world. If we truly believe in both of those statements, then we should be doing everything within our power to make not just our offices but our communities safe places for people and business to return to.

Ric Elias
CEO

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


Pull Quotes.


"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."


Buttons

Buttons take base colors.

Lists

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

  • Small Header

    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.

  • Medium Header

    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.

  • Large Header

    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.

Numbered Checklist

  1. 1

    Small Header

    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.

  2. 2

    Medium Header

    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.

  3. 3

    Large Header

    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.

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

  • Small Header

    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.

  • Medium Header

    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.

  • Large Header

    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.

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).

Extra Small

Small

Medium

Large

Extra Large

Icon Percentage

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

Icon percentages take base colors.

Icon percentages can also be encased in stat boxes. Stat boxes take base colors.

Random Percentages

Bureau of Labor Statistics

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


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


4 Columns


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

WARNING: If columned interlinks stack on top of each other on ASO, it leaves a big gap in between the lines of items.

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. You can also put no icon.

No Icon


To highlight some posts, these specialized cards can be used. Here is the component that RV would like publishers to use:

Related Articles

1

The Best Online Associate Degree in Nursing (ADN) Programs

Learn More
1

The 5 Best Accredited Online Teaching Programs

Learn More
1

Accredited Online Master's Programs in Psychology

Learn More
1

Best Online PhD in Psychology Programs

Learn More

I think this looks awful, however, and I will put in a ticket to try to get this fixed. You can check back here to see what it looks like, and if you still don't like the way it looks, here is another possibility:


Related Articles

Explore our picks for the best online ADN programs and get advice from real nurses. Choosing an online degree to become a teacher can be more affordable and give you a flexible schedule. Check out our list of the best teaching programs. Earning a master's in psychology can lead to a variety of career opportunities. Here, we list the best online psychology programs available.

On the downside, this card takes a little more work since it requires more information, and on ASO, it can only fit three 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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Vertical

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

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.

How To Research Salaries
Salary Research Websites Government Agencies Local Network
  • LinkedIn
  • Glassdoor
  • PayScale
  • U.S. Bureau of Labor Statistics (BLS)
  • Office of Personnel Management
  • Job recruiters
  • College career counselors
  • Friends and family
  • Local professional organizations

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.

US Map Title

State

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.

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.

Visualization Opportunities

Examples of using our resources and components to make unique visualization.

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:










Popular Resources

Whether you’re looking to earn your online degree or you’re a parent looking for answers, you can find all of your questions covered here. Explore these resources to help you make informed decisions and prepare for whatever is thrown your way.

See All Posts

AccreditedSchoolsOnline.org is an advertising-supported site. Featured or trusted partner programs and all school search, finder, or match results are for schools that compensate us. This compensation does not influence our school rankings, resource guides, or other editorially-independent information published on this site.

Shape your future with an online degree

Connect with a community of peers, and find a program that will allow you to continue your education in a fast and flexible way.