Flexible hero banner

This module is restricted to the top of the page.

Flexible Hero Banner Screenshot

Module Data

Included contents Required? Required content Character limit (if req.)
Breadcrumbs toggle Optional on/off toggle
Superheading Optional short text input 30
Heading Required short text input 60
Text content Optional long text entry (rich) 200
Dropdown label 1 (select a space) Optional short text input 25
Dropdown 1 options Required
Dropdown label 2 (choose a city) Optional short text input 25
Dropdown 2 options Required
Layout variant selection Required dropdown
Main image or media Required video or image selection
Image or media alt text Required short text input

On by default

Superheading

Will not apply to circular variants.

Heading

Main heading is a short value prop heading or statement. It should speak to the content or purpose of the page

Text Content

A secondary, longer value prop message used as a companion to the above value prop statement. Optional but highly recommended.

Expected options:

  • Rent an apartment
  • Book a furnished suite

This selection will determine which version of a regional page to load

Expected options:

  • Ottawa
  • Montreal
  • Toronto
  • Edmonton
  • Calgary

This selection will determine which regional page to load

Layout variant selection

Available options:

  • Standard
  • Circular
  • Wide
  • Circular wide branded
  • Circular wide

Image or media alt text

Content authors who are providing media assets are responsible for writing/providing alternateive text that describes an image for the visually impaired.

Module Media

File format: PNG, JPEG, SVG, GIF Flexible hero banner media files include the following

Included contents Required? Required content Character limit (if req.)
Background graphic Optional image selection
Background colour selection Optional dropdown

Background graphic

  • Does not apply to all variants
  • Screenshots here show this on the 1st (square) and 2nd (yellow) variants.
  • This graphic provides the yellow colour in this screenshot of the circular variant.

Background graphic

Applies to the portion of the banner with text.

  • white
  • grey
  • blue
  • beige (Default)

Dark background colours may change typography colour to ensure legibility.

Module variations

Standard

Flexible Hero Banner Screenshot

Wide

Flexible Hero Banner Screenshot

Circular Wide

Flexible Hero Banner Screenshot