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 more

When you play with BCLC, you're supporting over 5,000 local community organizations across B.C.

Learn more

Title 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