MarCom Studio

marcom-studio-internal.svg

Web Style Guide

Headers and Footers

The vast majority of UTSA official websites are required to use one of the university’s global headers and footers. Global headers and footers are designed to ensure that the university’s brand identity is consistent and that UTSA’s sites contain required elements. While all global headers and footers have the same look and feel, there are variations available based on the site's primary audience and position within UTSA's site architecture.

On This Page

UTSA Global Headers

UTSA's Global Headers consist of two parts, a blue Top Bar and a white Site Navigation, each are described below.

Header parts, site navigation and top bar
Parts of the UTSA Header

Top Bar

The Top Bar holds utility links, including the site search function.

Primary Top Bar
  • Use Cases: Top-level university pages that use UTSA’s global navigation
  • Example Pages: Home, About, Admissions, Academics, Locations, Campus Life
Desktop View
Primary desktop topbar
Mobile View
Primary mobile topbar
Secondary A Top Bar
  • Use Cases: UTSA official websites that include a UTSA department/unit logo at the top of the page
  • Example Pages: College home pages
  • Optional Feature: Google language widget
Desktop View
Secondary desktop topbar
Mobile View
Secondary mobile topbar
Secondary B Top Bar
  • Use Cases: UTSA official websites that do not include a UTSA department/unit logo at the top of the page
  • Example Pages: Provost, Alumni, Student Affairs
  • Optional Feature: Google language widget
Desktop View
Secondary B desktop topbar
Mobile View
Secondary b mobile topbar
Affiliate Top Bar
  • Use Cases: Affiliated Sites and Third Party Applications/Site may or may not use a UTSA header depending on the business case and technical limitations
  • Example Pages: Campus Dish, Rowdy Campus Store, Campus Technology Store
Desktop View
Affiliate desktop topbar
Mobile View
Affiliate mobile topbar

Site Navigation

Site Navigation describes the main site navigation bar which holds all the site's links or other navigational components and a UTSA branded logo or site name.

Primary Site Navigation
  • Use Cases: Top-level University pages
  • Example Pages: Home, About, Locations, Campus Life, Alumni
  • Optional Features: CTA Button, right-aligned
Desktop View
Primary Site Navigation from Home
Mobile View
Primary Site Navigation from Home Mobile view
Secondary Site Navigation
  • Use Cases: Departmental and other initiative pages that do not have their own UTSA brand logo and use text only title
  • Example Pages: Development & Alumni Relations
  • Optional Features: CTA Button, right-aligned
Desktop View
Secondary Site Navigation from Development and Alumni
Mobile View
Secondary Site Navigation mobile view

Footers

It is recommended that all UTSA websites also adopt the UTSA footer in the university’s signature blue that includes all the required elements. 

Primary Footer

  • Use Cases: Top-level university pages that use UTSA’s global navigation
  • Example Pages: Home, Admissions, Academics, Locations, Campus Life
Desktop View
Primary desktop footer

Primary Footer with Ankle

  • Use Cases: High-level university pages with direct influence over the university’s mission, vision, values and destinations
  • Example Pages: About, Office of the President, Inclusive Excellence, Strategic Plan
Desktop View
Primary desktop footer with ankle
Mobile View
Primary mobile footer with ankle

Secondary Footer

  • Use Cases: All other UTSA official websites
  • Example Pages: College home pages, major administrative units, etc.
Desktop View
Secondary desktop footer
Mobile View
Secondary mobile footer

Affiliate Footer

  • Use Cases: Affiliated Sites and Third Party Applications/Site may or may not use a UTSA footer depending on the business case and technical limitations
  • Example Pages: Campus Dish, Rowdy Campus Store, UTSA Scholarship Hub, RowdyLink
Desktop View
Affiliate desktop footer
Mobile View
Affiliate mobile footer