Skip to main content
Skip to main content

Web Style Guidelines
and Resources

Strata - Version Three

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: Table for more information on applying approved colors.

Standard Header

Default Header: Garnet Utility, Canvas Masthead, Canvas Navigation

Standard Header: Scroll

Scrolling desktop pages will show a truncated 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.

Standard Utility

Default Utility Bar

Utility Icons

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

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

Seal: 3D
Seal: 3D
Seal: 3D
Seal: 3D
Seal: 3D

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.

Primary Navigation

Desktop pages will should display navigation below the masthead.

Secondary Navigation

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.

Mobile: Closed

Closed Mobile Header

Mobile: Open

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

Standard Footer

Global Footer


Site-Specific Footer with Global Footer

Standard Footer

Example Site-Specific and Global Footer Combination