What kind of services/assistance do you need?
Creative Communication Platforms Marketing Merchandising News Media Official Communication Channels On-Campus Promotion Resources Social Media Strategic Counsel Web ServicesWeb 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](../../../images/web/diagram-header.jpg)
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](../../../images/web/topbar/topbar-primary-desktop.jpg)
Mobile View
![Primary mobile topbar](../../../images/web/topbar/topbar-primary-mobile.jpg)
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](../../../images/web/topbar/topbar-secondary-a-desktop.jpg)
Mobile View
![Secondary mobile topbar](../../../images/web/topbar/topbar-secondary-a-mobile.jpg)
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](../../../images/web/topbar/topbar-secondary-b-desktop.jpg)
Mobile View
![Secondary b mobile topbar](../../../images/web/topbar/topbar-secondary-b-mobile.jpg)
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](../../../images/web/topbar/topbar-affiliate-desktop.jpg)
Mobile View
![Affiliate mobile topbar](../../../images/web/topbar/topbar-affiliate-mobile.jpg)
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](../../../images/web/siteNav-primary-a.jpg)
Mobile View
![Primary Site Navigation from Home Mobile view](../../../images/web/siteNav-primary-a--mobile.jpg)
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](../../../images/web/siteNav-secondary.jpg)
Mobile View
![Secondary Site Navigation mobile view](../../../images/web/site-navigation-secondary-mobile.jpg)
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](../../../images/web/footer/footer-primary-desktop.jpg)
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](../../../images/web/footer/footer-primary-withAnkle-desktop.jpg)
Mobile View
![Primary mobile footer with ankle](../../../images/web/footer/footer-primary-withAnkle-mobile.jpg)
Secondary Footer
- Use Cases: All other UTSA official websites
- Example Pages: College home pages, major administrative units, etc.
Desktop View
![Secondary desktop footer](../../../images/web/footer/footer-secondary-desktop.jpg)
Mobile View
![Secondary mobile footer](../../../images/web/footer/footer-secondary-mobile.jpg)
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](../../../images/web/footer/footer-affiliate-desktop.jpg)
Mobile View
![Affiliate mobile footer](../../../images/web/footer/footer-affiliate-mobile.jpg)