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 |