Skip to main content
Apply Visit Give

Hero

The hero component is a flexible component that can combine images, colours, text, links and calls to action.  

Heros are an advanced component that should only be edited by AEM authors who have completed hero training.

Get training

If your unit uses heros and you haven't done so already, register for self-paced hero training. You'll get hands-on practice and the latest tips!

Uses

The hero component only works in the full browser window template. Heros are commonly used on homepages and high-profile landing pages for one of four purposes.

  1. Often a hero will have a striking image and a short amount of text to capture visitors' interest, like this example from engineering:
Engineering hero. A man is touching a large wooden model of buildings. Overlaid text reads "A hands-on approach to engineering".
  1. In addition to an image and text, a hero may have a button with a call to action that drives traffic to other pages. Here's one example from the Concordia homepage:
Three smiling students face the camera. Title reads "Chat with a current Concordia student". Button says "Chat now". Text in the middle reads "Learn what life at Concordia is really like - right from our students."
  1. An image-only hero can separate sections of content, like on the Fine Arts homepage:
Woman looking at a large wavy metallic sculpture that is metres long. There's a small credit in the bottom left of photo but otherwise no text.
  1. You can use a text-only hero inside a timed box to advertise timely information of major importance that you want people to take action on. The hero displays during the box's active time and disappears when the active time expires. For example:
Burgundy background with white text reading "Virtual masterclass with Stephen Spielberg", a "Register now" button and basic details on the topic, date and time

Heros are highly visible, so it's vital that you

Best practices

Change a hero image

  • Only change the image when absolutely necessary
  • Choose a simple image with a strong point of focus and room for text
  • Style the image as outlined in training. If needed, go to the Background settings tab and adjust the Background overlay so the text is easily legible.
  • Keep the hero consistent with any other heros on the page:
    • Same background colour (if any)
    • Same button style
    • etc
  • Follow the Accessibility guidelines.
  • To ensure the highest quality hero, email webcoord@concordia.ca before you activate the page. Our designer will review it and make any needed adjustments.

Add a temporary text hero

  • Add a box. Set the Margin to 0. Set the box Active Times.
  • Add a hero inside the box. Set the Overall height to Flexible. Under the Text settings tab, set Additional padding to 40px 0.
  • Keep the text to a minimum.
  • The hero allows for one or two buttons.
  • Adjust the settings so the hero's consistent with the other page components:
    • Same button style
    • Same text alignment (horizontal)
    • Same text area grid
    • Same background colour that's used elsewhere on the page
  • Follow the Accessibility guidelines
  • If the hero looks less than excellent, email webcoord@concordia.ca before you activate the page. Our designer will review it and make any needed adjustments.

Accessibility

  • Go to the Text Settings tab and ensure it's set to the appropriate Heading level
    • H1 for a hero at the very top of a page
    • H2 for all other heros
  • Keep the Title and Subtitle clear and concise, so they're easy to read on mobile
  • If you're including Button text, keep it clear and concise, e.g.
    • Apply now
    • Register now
    • Browse programs
  • Hero images are considered decorative, so you don't need to add alt text

© Concordia University