Header: Hero
This component introduces users to the homepage and delivers a central important message.
We give back by backing your community
When you play with BCLC, you're supporting over 5,000 local community organizations across B.C.
Learn moreWhen you play with BCLC, you're supporting over 5,000 local community organizations across B.C.
Learn moreTitle with no CTA
When you play with BCLC, you're supporting over 5,000 local community organizations across B.C.
When you play with BCLC, you're supporting over 5,000 local community organizations across B.C.
We give back by backing your community
Usage Criteria
This component uses a large visual to capture users' attention when they land on the homepage. It delivers a central message and then invites them to navigate deeper into the website.
Do's and Don'ts
- Do not use this component anywhere other than the top of the homepage (after the global navigation).
- Do not use this component more than once per page.
Design Notes
As this is often the first thing users see when they arrive on the website, it is a great way to highlight important information. A CTA lets them action on what they have just read, so it is recommended to include one (but not a must).
Configurable Options
This component has basic configurations for the Title and an optional Short description and CTA label. If no description or CTA is entered, the title will vertically center in the cirlce.
Developer Notes
Type |
Name |
|---|---|
AEM Component Name |
Header: Hero |
Code Base Name |
hero-image |
resourceSupertype |
bclccorporate/components/content/base-textimage |
SCSS Attributes |
hero-image.scss |
JavaScript |
hero-image.js |
Status |
Released (RC 1) |
Version |
Code Base v1.0 |
Designer Notes
Type |
Name |
|---|---|
Sketch Component Name |
BCLC_Corporate_Designs/components/header/hero |
Sketch Responsive Sizes |
Desktop HD, Desktop, Tablet, Mobile |
Status |
Released (Master) |
Version |
Design 1.0 |