Article: Header

This component provides context and topic information about the article content below it.

Design System

Full Width Article Header

Behind everything we do there’s a higher purpose: to serve the best interests of our players and our communities.

Design System

40/60 Article Header

Article intro text

Design System

Text Only Article Header

Article intro text

Usage Criteria

This component acts as a page header for article content, providing the user with context and topic information about what they are going to read if they continue scrolling down the page.

Do's and Don'ts

  • Use this component on single article pages only.
  • Do not use this component anywhere other than the very top of the page. 
  • Do not use this component more than once on a page.

Design Notes

The Article: Header is what determines the information seen on article cards that link to the Article Header's page. 

Configurable Options

This component is configured with a title, introductory text and image. The layouts can be adjusted to have the image be Full width, Cropped and scaled or Text only. 

Developer Notes

Type
Name
AEM Component Name

Article: Header
Code Base Name

article-header
resourceSupertype

bclccorporate/components/content/base-textimage
SCSS Attributes

article-header.scss
JavaScript

article-header.js
Status

Released (RC 1)
Version

Code Base v1.0

 

Additional Information

  • Title will use page title as default but can be overwrite in the dialog. The catelog is retrieved from the page parent's title

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/article/header
Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile
Status

Released (Master)
Version

Design 1.0