Skip to main content
CMS Example Site CMS Example

Hero (Homepage Rotator)

The Hero section is a full-width image (or slideshow) with optional headlines and buttons built into the homepage template. It can have one or more slides. Find examples of what and what not to do when building the most impactful portion of your site.

Best Practices

  1. Set the tone for your site with rich imagery and a small amount of supporting text.
  2. Take time in picking out your images. They will have a strong impact on your users.
  3. Limit yourself to 3 or 4 images. This page has 5 (to showcase options) and it is pushing what people will sit through. If you put important information on a late slide, you can't count on people seeing it.
  4. Use the slide to direct people to other pages with the information you want them to have - don't try to squeeze all that information into the slide.
  5. Hero text is responsive, meaning it will change position and size to stay legible on a variety of screen sizes. To see where text will appear:
    1. Make sure your browser window isn't maximized.
    2. Click and drag the left or right edge of the browser window and drag it to the center.
    3. You will see the text floating over the images shift in position.
    4. Use the guidelines on the background image to estimate where your text will appear.

Components Best Practices

  • Image:
    • Size 1440 x 530 pixels.
    • If you have multiple images, make sure they are all the same size
    • If using text (Headline, Blurb, Button):
      • Avoid images that don't contrast with the text.
        • Avoid light images if using the default light text, or
        • Select Text Color: Dark after you have selected your light image.
      • Avoid text in your image. This will clash with the floating text.
      • Avoid images of people where the text will obscure faces.
  • Headline (all caps, white unless dark text is selected):
    • Use for the most prominent information on your page (department name, etc.)
  • Blurb (smaller sentence case, white unless dark text is selected):
    • Do not use for critical information. Will be omitted on smaller screens.
  • Button (all caps):
    • Use short, descriptive text.
    • Note: Required for link.
  • Link Type
    • Internal or External
  • Image Description (Alt Text)
    • Describe the image for users that can't see them (images disabled/ didn't load, using a screen reader, etc.)

Options

  • Text can be left or center aligned (slides 1 and 2 on this page, respectively). Left aligned text can have a headline break (a second, indented line with same-sized text).
  • Text can be dark instead of light (slide 6 on this page). You can only choose this option if you are using your own image.
  • Text fields are optional. You can leave out text to let your image speak for itself.
  • Add multiple images to create a rotator.
  • If you don't have an image, see the hero image library or use one of our two pre-canned styles:
    • Trident (slides 3 and 4 on this page)
    • Geisel Library (slide 5)
    • Pre-canned styles can be dark blue (slide 3), light blue (slide 4) or neutral gray (slide 5).
    • Pre-canned styles can have a yellow, cyan, orange, or gold button.

What not to do

Text problems:

  • Too much text can run too far down the image, rendering your message less effective. You want to use maybe 30 words to concisely get your image across.

Hero image with too much text

Image problems:

  • People's faces are covered by text.
  • White background doesn't provide contrast.
  • Having text on the image conflicts with the module's floating text.

For better images, see the hero image library.

Hero image with text covering faces

Hero with white background

Example of what not to do: text on text