Primary Elements
Websites utilizing the Strata Three design should contain the standard header and footer configuration.
Header
The standard header design consists of a garnet utility bar and drawer, canvas masthead (including gold 3D seal), and canvas primary navigation. Background colors and seal style may be changed to fit site design requirements. Please review Interface: The Strata and Colors for more information on applying approved colors.
Default Header: Garnet Utility, Canvas Masthead, Canvas 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 | WEB STYLE GUIDELINES AND RESOURCES" in this site's case. The main FSU website uses the full title.
Default Utility Bar
Utility Icons
Global menu (), search (), and webmail () 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.
Masthead
One of the university's seals, the website title, and optional subheading form the site's masthead. Choose from one of the five seal variations: 3D, full-color, black, garnet, or gold. If possible, use the full title of your college, department, institution, office, etc. The subheading, while optional, acts as a descriptor. When omitting the subheading, replace it with a non-breaking space: &nbps;.
University Seal Examples
Primary Navigation
A website's main navigation should display directly below the masthead when space allows. If navigation items span too far to fit in one line, they may be moved out of the header and placed into the secondary location within the main content area.
Desktop pages will should display navigation below the masthead.
Navigation may be placed within the main content area.
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. Background colors and seal style may be changed to fit site design requirements. Please review Interface: Containers and Colors: Table for more information on applying approved colors.
Global University Footer
Global Footer
Site-Specific Footer with Global Footer
Example Site-Specific and Global Footer Combination