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 a background image included. By default, the hero will appear in the main content area. 

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. The hero will appear in the main body of the page unless you follow one of the following steps:
    • To add the hero to the top of the page, include the term "feature" in the name.
    • To add the hero to the right column sidebar, include the term "sidebar" in the name.
    • To add the hero to the footer, include the term "footer" in the name.
  • 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.
  • Do not use a hero to simply display an image; the caption wrapper will still be shown.
  • Make sure to test your images on a variety of devices.
  • To help calculate your image dimensions, use this Ratio calculator.

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.