Credit: Visual Generation | iStock | Getty Images Plus
NOTE: This styleguide has been revised on 11.08.2022.
Site 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
#277F94
Primary-Light
#F5F7F9
Secondary
#BF2047
Secondary-Light
#BF2047
Tertiary
#9DBD4E
Tertiary-Light
#E2EBCA
Accent
#154B64
Accent-Light
#B5C9D1
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
This way!
This way!
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:
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.
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.
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.
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.
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.
Thomas Broderick
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
- LIST
- LIST
- LIST
- 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.
- LIST
- LIST
- LIST
- LIST
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.
-
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.
-
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
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
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.
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.
-
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 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
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.
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.
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.
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.
To highlight some posts, these specialized cards can be used. Here is the component that RV would like publishers to use:
Related Articles
The Best Online Associate Degree in Nursing (ADN) Programs
The 5 Best Accredited Online Teaching Programs
Accredited Online Master's Programs in Psychology
Best Online PhD in Psychology Programs
Tabs
Tabs can take a "horizontal" or "vertical" layout. Vertical layout is preferred. Use with discretion. Do not go haywire with its use.
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.
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.
| Salary Research Websites | Government Agencies | Local Network |
|---|---|---|
|
|
|
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
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
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:
Online College Resources
Helping you prepare and gain the most out of your educational experience.