Consistent Page Elements

Header

Every page has a consistent header:

• Navy strip with the FAU logo, personas and universal action buttons
• "Breadcrumbs," which indicate where the page is located
• Search bar and mega menu, where you can put your main navigation
• Name of the College, Department, or Division (no individual department or division logos are used)

You can see an example at the top of this page.

Mega Menu

Every page has a mega menu directly above the page title. The links in this menu are fully editable and provide a way for you to organize all of your pages.

Hero Images

Homepages contain a slider (2-3 images) or still image called the “hero.” The design of the hero is standard. There should be no text added to the image(s) in any location. Any text displayed on a hero is added via Omniupdate. Please note that the text will always be white.

Images must be properly cropped and not distorted or warped in any way. They must be able to accommodate text overlaid on top of the image on desktop, tablet, and mobile. It is recommended that you test the hero images after uploading to make sure that the text is legible on multiple devices.

In some cases the text is unreadable due to how light the image is. In these cases, it’s best to add a black gradient at 50% opacity to create enough of a contrast for the overlaying text.
Flip through the slides to see the changes with a gradient.

Header Banner

Internal pages may display a header banner. This is to provide visual interest and must be somehow related to the content. These are not as tall as the hero images on your homepage. It is recommended to use bright and clear photographs resized from high-resolution images. There should be no text added to the image in any location. Images displayed as a header banner must be properly cropped and not distorted or warped in any way. It must not include text or clip art. It is recommended to stay away from concept art found commonly on stock image websites, and include students, faculty, staff, or academic-related images only.

Widgets

Homepage content can be displayed in the form of widgets. This allows you to show information in various, dynamic and interactive ways to keep the visitor engaged. The content (images and text) of the widgets are fully editable, but the text styling and design is standardized.

The widgets are modular and can be ordered on the page however you would like. Some widgets take up the full width of the page, and some are half-width. Choose widgets that display your content in an effective, relevant way that suits your needs

Global Footer

Every page has the same footer.

You can see the footer below on this page and throughout the rest of the styleguide pages.

Local Footer

The Local Footer is a space above the FAU Global Footer that is customizable.

Local Footer must have more than one element but can have no more than six columns.

• Additional Information
• Disclaimer/Licenses
• Local quick links
• Contact information
• Social media links (no icons)
• CTA (buttons)