CC Styleguide

Updated November 16, 2022

CollegeChoice.net 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: Visual Generation | 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
#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

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.

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.

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

The Best Online Associate Degree in Nursing (ADN) Programs

The Best Online Associate Degree in Nursing (ADN) Programs

The 5 Best Accredited Online Teaching Programs

The 5 Best Accredited Online Teaching Programs

Accredited Online Master's Programs in Psychology

Accredited Online Master's Programs in Psychology

Best Online PhD in Psychology Programs

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.


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:










Online College Resources

Helping you prepare and gain the most out of your educational experience.