Hero

The hero is a large promotional section that brings the user's attention to priority content. It provides a content area that allows for full-width background image, plus a title, short blurb and links to other key journey-related content.

Examples

Large hero image with caption

The compass — Background image

This is an example of a hero with an image and caption. By default, the hero will appear in the main content area.

A dog and student hanging out at VCU's compass

No background image

This is an example of a hero with no background image included. By default, the hero will appear in the main content area with a black background.

Code reference

When to use

Heroes are typically used at the very top of a page to provide visual representation and introductory messaging, but they may be placed in other areas of your page as well.

On a large screen, the short blurb will show up directly on top of the image in either the bottom left, bottom center or bottom right corners. On a small mobile screen, the short blurb will show up underneath the entire image.

How to use

Access t4.vcu.edu and navigate to the page you would like to update.
Select the "Plugin-Hero" content type in T4.
Enter content in the required "Name" field.
Use the WYSIWYG to add an optional text box to the image.
Click the "Select media" button to add the image you would like to use (must be uploaded to the media library first).

Tips

For use within full-width areas, such as the feature or footer areas, images wider than they are tall will look the best (such as 16x9). For use within the regular content area or the sidebar, images with similar widths/heights (such as 4x3) and images that are taller than they are wide (such as 9x16, or portrait version of 16x9) will work best respectively.
Make sure to test your images on a variety of devices.
To help calculate your image dimensions, use this Ratio calculator.
To change where a hero is displayed on the page, you can do the following:
- Include the term "feature" in its "Name" field or area:{feature} in its "Injectors" field to move it to the top of the page.
- Include the term "sidebar" in its "Name" field or area:{sidebar} in its "Injectors" field to move it to the right column.
- Include the term "footer" in its "Name" field or area:{footer} in its "Injectors" field to move it to the bottom of the page.

Requirements

A name for your hero is the only required element. However, you must enter some text to avoid a blank caption wrapper appearing on your page.

Images are not required. If you do not upload an image, the caption will appear against a black background.

Accessibility considerations

Make sure to check that all content entered into this component meets web accessibility standards.