Style Guide

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Paragraph

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor.

Large Paragraph

Add a class of 'is-large' to the paragraph for larger text.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor.


Buttons

Don’t forget Link Text, this is used for the Button text.

Regular Size Buttons

Online Degrees

Online Degrees

Online Degrees

Small Buttons

Online Degrees

Online Degrees

Online Degrees


Images

Full width

A full width image should have a maximum width of 1040px.

Floated Images

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo.

Center Aligned

Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Left Aligned

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.

Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Right Aligned

Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Featured Resources Widget

Make sure to add Link Text to the links.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


Lists

Unordered List

  • Aenean eu leo quam.
  • Aenean eu leo quam.
  • Aenean eu leo quam.
  • Aenean eu leo quam.
  • Aenean eu leo quam.

Ordered List

  1. Aenean eu leo quam.
  2. Aenean eu leo quam.
  3. Aenean eu leo quam.
  4. Aenean eu leo quam.
  5. Aenean eu leo quam.

Blockquote

The Citation at the bottom is optional.

Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.

Charles Smith
Title

Column Listing


Featured Accordion

Using this component we will be able to list schools or programs.


Featured School/Program Cards

Alvernia University

With programs in areas including business and nursing, Alvernia University offers a h…

View Programs for Alvernia University
Bethel University

Bethel University Online offers undergraduate and graduate online degree programs for…

View Programs for Bethel University
Campbellsville University

With 50+ online degree programs in business, education, social work and more; Campbel…

View Programs for Campbellsville University
Concordia University, Nebraska

Concordia University, Nebraska is a nationally ranked, affordable Lutheran, Christian…

View Programs for Concordia University, Nebraska

Sponsored


Table

In this component the caption and heading are optional. It can have as many rows and columns as desired. On mobile it becomes scrollable.

Total Business Degrees Awarded in 2016800,019Growing 0.93%
Average In-State Public School Tuition$6,577 per yearGrowing 1.03%
Average Out-of-State Private School Tuition$29,650 per yearGrowing 4.04%
Average Wage$85,676Growing 3.07%
People in Workforce10.5 millionGrowing 1.61%
Average Employee Age43.6 years oldGrowing 0.39%

Accordion

Accordion without Icons

Accordion with Icons

These icons pull from a list of images in the icons folder. New ones will have to be added by a dev.


Call to Action Blocks

Don’t forget to add Link Text to the Link or the button will be empty.

Call to Action Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.

Link Text

CTA with an image

Ideally this image would have a 1:1 ration or have a portrait orientation. The example is 49px x 347px.

Young, female graduate smiling

Call to Action Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.

Link Text

Featured Interview

Before setting up this block you will first have to create a post under Interviews. By default, the first question of the interview will be expanded.

Clinical Social Worker

What’s It Like Being a Social Worker?

Kristina entered the field of social work to help others with issues in their everyday lives. She gives her perspective on the profession.

View Full Interview

Program Finder

This menu is populated by the taxonomy Area of Studies. Each taxonomy has a field labeled Overview Page. The link selected for that field is what will be used in this feature.

Sponsored


Card Listing

Choose from a list of pages.


Full-width Card Row

Minimum of two cards and a maximum of six.


Resource Listing

This will show all categories in the RESOURCE taxonomy. To show a single taxonomy please select from the list in the block. Please note that filtering is only available for all resources.


Image w/Text

A simple component that features an image on the left half and a WYSIWYG on the right. This should only be used on full width pages.

Heading

Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.