Page Layouts

Examples of available page layouts are listed below. Select a layout type to find out more information, including implementation.

Site Structure

Page layouts are a key part of overall page structure. Learn more about how USU sites are structured (including header, fat footer, top navigation, etc.).

Landing Pages

These landing page layouts have been developed and approved by University Marketing and Communications (UMAC) and provide a unified look across university websites. Find out more about UMAC guidelines for using Hero Banners.

Blue Hero Banners

Blue Hero Banner
banner full width header

Blue Hero Banner with Subtitle
banner full header with subtitle

Narrow Blue Hero Banner
banner narrow header

Narrow Blue Hero Banner with Subtitle
banner narrow header with subtitle

Centered Blue Hero Banner
hero banner centered

Centered Blue Hero Banner with Subtitle
hero banner centered with subtitle

Short Hero Banner
short banner screenshot

Striped Sectional
striped sectional

Assessment Page
assessment page

Image Hero Banners

Image Hero Banner With Overlay
banner image with overlay

Image Hero Banner With Overlay Bar
image with overlay bar, button

Video Hero Banners

Autoplay Video Hero Banner
autoplay video

Youtube Video Hero Banner
youtube video banner

Basic Layouts

Side Navigation
side navigation

In-Page Navigation
in page navigation

Sidebar
sidebar

Column Options
columns options screenshot

Directory

2 Column Layout with Side Nav
2 column directory with side nav layout

3 Column Layout
three column directory layout

6 Column Layout
six column directory layout screenshot

Table Listing
table listing directory layout screenshot

News Feed

News Feed with Search Bar
news feed with search bar

On This Page