Page Templates

Page Templates


Home

The home page template has a fixed layout and components.

The home page hero section has two options, hero section with background video OR hero section with background image ONLY:

 

Hero Section:

 

  • Video must be 16:9 ratio or wider.
  • Video cannot have audio.
  • Video must not contain essential content.
  • video element must contain a poster attribute using image that matches the video's aspect ratio (This template uses 1600x900).
  • Same image specs above must be applied to section's background-image for mobile, as mobile does not use video (This template uses 1200x800 version).
  • See above link for example of home page with no video used. Background image used is 1600x900.

 

I AM… Section:

 

  • All images must be the same dimensions as one another, for both mobile and desktop.
  • Desktop layout height is based on the tallest item. Avoid letting one or two get extra wordy.
  • Mobile is slider, height will change based on the amount of text on the current slide.
  • 60 character limit to rollover text.
  • Modal body text character limit of 250 characters.
  • Up to 6 links in modal.

 

Text and CTA Section:

 

  • Meant for up to a short paragraph of text with two CTA buttons. Text limit of 500 characters.

 

Stats Section:

 

  • Keep large top text short, 5-6 characters or less to ensure no word-wrapping or overflowing happens, for smaller viewport widths.
  • All box heights match the tallest box.
  • 100 character limit to bottom text.
  • Background image must fade to white in image itself, it is not done programmatically.
  • Background image should be at least 1440px wide and 700px tall.
  • Section is set to be a min height of 700px.

 

Sliding Promo Section:

 

  • Sliding transition happens when top of section hits the bottom of the header.
  • Image maintains aspect ratio while matching height of section. Sides will be hidden as viewport gets smaller. Ensure subject matter is in horizontal center of images.
  • Section height is determined by tallest left or right text or image. This template example is determined by images (563px tall).
  • Images must match each other in height to retain quality.
  • Sufficient whitespace needs to be left above and below text on both sides, to ensure all user devices can read all text on both sides. Current "Explore our academic pathways" side is very tight.

 

News Section:

 

  • Title text is full caps.
  • Thumbnail images are 510x382.
  • If there is a thumbnail image, trail off article preview text with ellipses after 110 characters.
  • If there is NOT a thumbnail image, trail off article preview text with ellipses after 350 characters.

 

Events Section:

 

  • Background image at least 1200x675 to retain quality and reliable parallax display.
  • Location and time are optional. If not provided, leave out. Date, title, and link are required.

 

Campuses Section:

 

  • Body text for each campus can be up to 200 characters.
  • Full-size images are 1140x504 each.

 

News Listing

The news listing page template has a fixed layout and components.

Link to News Listing template.

News Story

The news story page template has two layout options:

 

Program Listing

The program listing page template has a fixed layout and components.

Link to Program Listing template.

Program Page

The program page template can use the standard inner components, but there is also a special component ONLY on the program page - the program information card, at the top of the page.

Link to Program Page template.

Directory Listing

The directory listing page template has a fixed layout and components.

Link to Directory Listing template.

Standard Inner

The standard inner has different layout options. See Layouts section for more information.

Link to Standard Inner templates layouts information.