Create and use hero

ASURA uses heroes on all pages except those below the tertiary level. This page provides guidance for how to create and use heroes.

Hero standards

Heroes add interest to web pages, and make it clear what to expect on the page they head.

ASURA follows all ASU Unity Design standards for heroes. If there is a conflict between what is shown here and what is on the ASU Unity Design Kit, the latter is the one to trust.

When you add a hero to a page, you will be given a choice of small, medium, or large. Use large only on the home page. Use medium for any page that is linked to from the site menu -- this will be almost all pages other than the home page. Use small for pages that are subsidiary to a menu page. Small heroes do not allow for text beyond the page title.

For maximum efficiency and quality, the images you use should have a resolution of 300dpi and a width of 1920px. Anything wider will not scale with the window. Higher resolutions just add load time, and do not improve the quality. You do not have to crop to a particular height, but be aware that the following are the heights that will be displayed, so you may want to do some cropping or enlarging to assure that the photo will display as you hope:

Small: 256px
Medium: 512px
Large: 684px

For the hero heading you will normally use the page title. The ASURA sites all use Gold background for the hero heading.

The hero text should give a sense of what is on the page, without just repeating page content. It should be informative and inviting (the "inviting" part may not always apply).

Leave the Sub Heading blank. Subheadings tend to make the page look cluttered and busy rather than inviting.

It is possible to add a button to the hero. Use this sparingly, to link to pages that are tightly connected to this one. If you add a button, use the Gold style. If you add a second button, it should be maroon. Delete any CTA links that were created by Webspark that you don't intend to use. These empty links cause accessibility problems.

Always use the Appearance Settings on the hero to add 96px of margin at the bottom.

Choosing hero images

You will want to choose a hero that is consistent with the information on your page.

You can review what is already available on the site by looking at the site content. To do so, chose the Content tab of the administration menu (top of the page), then the Media browser tab. Click on the Hero Images folder and review the images available there for suitability.

If a suitable image is not available, or you just want to use something different, select an image that is from the ASU Photo Gallery, from your own personal collection, or from any other source that you have legal rights to use.

In order for hero text to be highly visible, a hero image must not be too light. Webspark automatically applies a gradient to darken the bottom portion of the image, but if your image is too bright or light in color that will not be enough to provide good contrast for the text.

Heroes on Wild Apricot

If you need to create a page with a hero on Wild Apricot (should be unlikely):

Create the hero using a background image. in the hero section, which should have a fixed height of 256px. The image should probably be created at 256 px in height, as Wild Apricot doesn't adjust it for you. You should also apply a gradient to the picture so that it is dark enough at the bottom for the text to contrast.
Add H1 text and highlight it with gold. Put a space before and after the text.
Set bottom margin 48, padding top 102, padding left 96.

Updated 15 Mar 2022 by Connie McNeill