UF
College of Education

< Back to Style Guide

Heroes and Headers

Hero sections and headers are the first elements visitors see on a webpage, aiming to grab attention and provide a quick overview of the content or message.
This content type is used for all kinds of pages across COE. The hero section has several different display formats depending on where it is being consumed. Refer to the images below the content type elements to see how each element is used.

Content

1. Hero Image

  • This could be an image or a video.
  • Ensure that hero images or videos are high-quality, relevant, and ADA compliant.
  • Check the text color on images pass WCAG AAA standard.

2. Breadcrumb

  • Navigation to go backwards.

3. Heading

  • The title for the page.

4. Sub Heading

  • Title for the following content.

Don’ts

Avoid placing extensive text directly onto the hero image, as even with a transparent background, it may not be legible or easily readable.

Avoid placing extensive text directly onto the hero image, check the color contrast and add a color overlay if placing the header at the bottom of the hero image.

Avoid using a color block as a hero image.