Type Styles

Below are the typographic styles available when working with text. Many components have preset typographic styles that can serve as a good reference when setting headlines, subheadlines, body text, or captions.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Hero

This Hero is reserved for special instances such as the main university homepage and college landing pages. Its component include a Title, Subtitle, Body Text, Image, and Links. It functions as a large component that can be used at the top of a page to grab the viewer's attention when they first navigate to the page. Headlines should not exceed 80 characters and subheads should not exceed 380 characters.

Featured Content

This component allows a large amount of news and events to be featured in interesting ways. One featured story remains in the center while a left column shows headlines and preview images while the far right column allows space for a list of numbered headlines.

Two Column: Title and Action Links

These two column components allow for two link buttons and can appear in four different color profiles: Blue, Light Blue, Dark Blue, and White, as shown below.

Two Column: Billboard

This component features two columns of image and text.

Two Column: Left/Right

This component features two columns. The left featuring text and the right featuring a video player. There are two color profiles to choose from: White and Light Blue.

Two Column: Contact Block

This component features a two column contact block.

Two Column: Text with Image

This component features a title, body text, and image. Titles should not exceed 50 characters and body text should not exceed 300 characters. 

Two Column: Billboard

This component features a two column card layout consisting of news and events that can either be clickable to view more content with a CTA button, or remain static.

Link List

These link lists have a variable amount of links that can be added on the left or right column. The links can appear as three different color profiles: None, Dark Blue, Light Blue, and Green, as shown below.

Quick Facts

This quick facts component has a variable amount of facts that can be highlighted. There are four different options for fact types: None, Percent Sign, Number Sign, Dollar Sign. The background image is customizable. 

Accordion

The intended use of accordions is to truncate large amounts of information on very text/content heavy pages, and also to keep scroll depth down in order to create the best possible UX. Items in the accordion component are variable in number. Color profile is not editable.

Title, Text, and Buttons

This component includes a title, body text, and buttons. Buttons do not have editable color profiles. The background is an editable image that can be changed. This component was designed to only be placed above the footer and used as a final sign-off with CTA(s). A minimum of one CTA must be used, with a maximum of four total. 

Three Column: Title, Text, and Buttons

This three column component features a title, body text, and three buttons on the far right. Three color profiles are available to choose from: White, Tan, and Light Blue.

Testimonial

This testimonial component can have between one and three testimonial columns, but we suggest always using all three columns. Images and quotes are editable.

Video: Large Player with Title

This video component has a large video player and allows a teaser image to be uploaded as a preview for the video.

Gallery: Q&A

This two-column, question and answer component can have a variable number of Q&As. The background color or imagery should not be changed in order to provide the best possible legibility of the Q&A's. 

Gallery: Modal

This gallery component has a variable number of Carousel Slide components and an editable background image. 

Gallery: Carousel

This gallery component has a variable number of images that can be added to the carousel.

Image/Chart/GIF

This component allows for an image, chart, or gif to be displayed at a large scale.

Full Width Image with Text

This component allows for an image, with a title and body text overlayed. A dark gradient is included in the component to create contrast between the text and image, but we suggest using images like landscapes or campus architecture. Images should not feature close ups of faces or figures. 

Cards: Contact (Staff Listing)

This component displays cards of all contact information for faculty based on department selected. 

Cards: News

This component displays cards of most recent news. Content is selected by choosing a category linking URLs or with titles. 

Cards: Events/Important Dates

This component displays event information as cards. It includes an editable title and background image. Events can be selected by the event category.

Accolade

This component displays a variable number of images of accolades. No fewer than 2 accolades should be displayed.

Slate Form Embed

This embedded form component has an editable title.