Hero component

This is an advanced component reserved for use by the UCS Web Team and AEM authors who have taken hero training.

Component(s) you might want to use with this one:

Breadcrumb
Grid container
Box
Column control
Carousel Multi items

Design options

There are several hero size and text options available. Enter all your content before choosing settings for your hero.

Hero size options

Tall (60vh) - Top hero on home pages (ex. https://www.concordia.ca/finearts.html)
Medium (45vh) and Short (35 vh) - Top hero on first level landing page (ex. https://www.concordia.ca/students/services.html)
Mini (19vh)
Square - this option, if selected, is for use in a column control
Flexible - commonly used for heros that use a background colour instead of an image
Full height - reserved for use by the Concordia Web Team

Take a look at examples of the different hero sizes

Field name	Description
Overall height	Vertical height (vh) = the percentage of the browser window that the hero occupies Tall (60vh) Medium (45vh) Short (35vh) Mini (19vh) Square Flexible Full height
Main text
Title
Subtitle
Category
Category name	Adds a hyperlink above the Title
Link to
Call to action	Maximum of 2 buttons If you add one link but keep the "Button text" field empty the entire hero will be clickable and will have a mouse over effect of 80% opacity.
Button1
Button text
Link to
Open new tab	Check this when linking to an external website or PDF
Button style	Ghost light Ghost dark Filled (Burgundy) Filled (Other)
Large button
Button2
Button text
Link to
Open new tab	Check this when linking to an external website
Button style	Ghost light Ghost dark Filled (Burgundy) Filled (Other)
Large button
Place below	Stacks the two buttons. Leave this option unchecked by default; TBD by UCS Web Team in design review.

Field name	Description
Design settings
Heading level	H1 (use for top hero only) H2 (all other heroes on the same page; this must be set for accessibility)
Font family	Gill Sans Medium Gills Sans Bold Condensed Gill Sans Bold
Font size	XX-Large X-Large Large Small X-Small
Title colour	White Black Burgundy Other
Subtitle colour	White Black Other
Contrast	None (Default) Solid shadow Blurred shadow Stroke Background box (Dark) Background box (Llight)
Desktop settings
Align (horizontal)	Left Centre Right
Align (vertical)	Top Middle Bottom Other (%)
Mobile settings
Align (horizontal)	Left Centre Right
Align (vertical)	Top Middle Bottom Other (%)
Text area settings
Text area grid	Narrow (768px) Default (940px) Wide (1200px) No grid
Text area width	A percentage of the width of the selected text area grid. 100% 90% 80% 70% 60% 50% 40%
Additional padding	Only use with the "Flexible" hero Ex: 60px 0 60px 0 (top right bottom left)

Take a look at examples of the different text styles and settings

Field name	Description
Background colour
Colour	Background image will take precedence over background colour Web colour palette White Light grey Medium grey Dark grey Very dark grey Black Burgundy Magenta Orange Mauve Dark blue Blue Turquoise Green Burgundy tint Magenta tint Orange tint Mauve tint Dark blue tint Blue tint Turquoise tint Green tint Gold tint
Background image
Horizontal position	Left Centre (default) Right
Vertical position	Top (default) Middle Bottom
Background overlay
Overlay shade	Dark (Default) Light Other
Top opacity	0% - 100%
Bottom opacity	0% - 100%
Photo credit
Name	Appears in white text in the bottom right hand corner
Background video	Use only with permission from UCS Web Team
MP4	The location of the video file*
Image	The location of a static image (still) file*
Loop video	Checked by default
Show Pause/Play	Unchecked by default If a video is longer than 5 seconds, it is recommended to enable the pause/play button
*Both MP4 and images files are necessary for a video background to work properly

Field name	Description
Crop	Free Crop Square (1:1)
Clear	To remove the photo from the component
!	Shows the location of the image in the DAM

Field name	Description
Other colours	Web colour palette
Title colour	White Light grey Medium grey Dark grey Very dark grey Black Burgundy Magenta Orange Mauve Dark blue Turquoise Green
Subtitle colour	White Light grey Medium grey Dark grey Very dark grey Black Burgundy Magenta Orange Mauve Dark blue Turquoise Green
Button (1) colour	White Light grey Medium grey Dark grey Very dark grey Black Burgundy Magenta Orange Mauve Dark blue Turquoise Green Yellow Gold Magenta Lime
Button (2) colour	White Light grey Medium grey Dark grey Very dark grey Black Burgundy Magenta Orange Mauve Dark blue Turquoise Green Yellow Gold Magenta Lime
Overlay colour	White Light grey Medium grey Dark grey Very dark grey Black Burgundy Magenta Orange Mauve Dark blue Blue Turquoise Green
Other vertical align settings
Desktop	0% - 80% Clear
Mobile	0% - 80% Clear
Additional info
CSS class
UTM source
High quality	Force the quality of the background image to be set to high. This is not recommended because it will slow down the page load.
Deprecated title style

Script tab DO NOT USE - reserved for the UCS Web Team

Guidelines

Ensure you select the correct heading level for the title (H1 or H2)
Chose photos that have a strong point of focus.
Always check the mobile display of your hero. This can be done by shrinking your browser window.
If the text is hard to read, either change to a less busy image, add text contrast or add an overlay.

Accessibility

Headings

It is important to set the correct Heading level for the Title field (found in the Text settings tab). The default is H1, the other option is H2.

H1
- for a hero at the top of the page directly beneath the Concordia header
- only one H1 per page
H2
- for a hero that is not at the top of a page
- can have more than one H2 on a page

Buttons and hyperlinks

Write descriptive calls to action.

Colour combinations

When using a solid background CUBE colour use white text.
When using a solid background CUBE tint use black text.

Images

Hero images are decorative background images and do not use alt text.

Video

If a background video is on a loop, or is longer than 5 seconds, enable the pause/play button

A cube colour uses white text

A cube tint uses black text

Examples & use cases

Take a look at examples of best practices

Dos

Use BoldCondensed all caps for the top hero H1
Set the image position before you crop
Adjust the text area width if your text wraps strangely
Check your page for mobile display
Work with your comms advisor (and web team) to determine best approach for sharing timely information

Dos for selecting images

Key elements:

Simplicity
A centred composition
Symmetry
The rule of thirds
Hero overlaid text will be legible
The eye is drawn to one point of focus in the photo

Take a look at examples of images that work well

Don't

Stack heroes
Use multiple heroes to visually break up the page
Use heroes for announcements across multiple pages
Use call to actions in a top hero that divert people from reading important information on the page
Have more than one H1 on the page
Add line breaks to your text if it wraps strangely; adjust the text area width instead
Use the hero to layout a page of body text

Don'ts for selecting images

Key elements:

Images are so busy that the overlaid text is difficult to read
The eye jumps all over different parts of the photo without being able to settle on one element
Image is cropped too close to the subjects face and there is no room for text

Take a look at examples of images that do not work well

Helpful tips & "gotchas"

Training

Heros are covered in the Heroes and Cards training sessions. This training is reserved for units whose websites use this component.

Need support?

The Web Team is here to help.