Blog / editorial hero banner
This hero banner is intended to promote a feaetured post (with a CTA to access said post) This hero banner is also to be used at the top of a module / page.
This module is restricted to blog posts or other identified editorial content types
Module Data
| Included contents | Required? | Required content | Character limit (if req.) |
|---|---|---|---|
| Category tag | Optional | multi-select | |
| 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 |
Category tag
Select or identify tags from taxonomies
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.
Dropdown 1 options
Expected options:
- Rent an apartment
- Book a furnished suite
This selection will determine which version of a regional page to load
Dropdown 2 options
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
This module is restricted to the top of the page.
This module is restricted to the top of the page.
