Web Style Guide

The header of a website is the easiest way to create a consistent experience across all websites. The simple header is intended to be used in conjunction with existing header navigation and layout.

Download Header and Footer (Strata 3.3.14)  
Web Compliance

WordPress Theme

WordPress Theme (Strata 3.3.14) ACF Plugin Favicon
Wordmark for use with the Favicon by RealFaviconGenerator.

Note: This WordPress theme has reached end of life (EOL) and end of support (EOS).

Header

The standard header design consists of a garnet utility bar and drawer, FSU wordmark, canvas masthead and canvas primary navigation.

Scrolling desktop pages will show a collapsed header.

Global Utility Bar and Drawer

The global utility bar contains "Florida State University" on the left side except and a link to www.fsu.edu. This text and link are removed on the main FSU website. The scrolled version of the utility displays a truncated version along with the site's title such as "FSU | TITLE OF SITE" in this site's case. The main FSU website uses the full title.

Utility Icons

Webmail (), search () and global menu () are the default icons included with the utility bar. Only the global menu, which displays the top-level university navigation, is required. Use Font Awesome Icons for your additional icons.

Utility Drawer

Icons may be used to open the utility drawer or link directly to another FSU website in the same window. In this example, the search drawer is exposed.

Mobile Display

Utilizing hidden-xs and visible-xs classes, the mobile and header versions differ in display. The university seal is not shown on the mobile version. Primary navigation is combined with the university's global navigation within the global menu and hidden below the masthead.

Closed Mobile Header

Open Mobile Header

Footer

The global university footer is required in Strata Three and should remain unaltered from its original form. Site-specific footers may be placed on top of the global footer and match its color scheme.