Article: Card > Related
This component offers related articles that the user might be interested in reading after their current article.
Usage Criteria
This component previews articles related to the content the user is currently viewing. Users can get a snapshot of each related article and optionally click to view the full article if they want more information.
Do's and Don'ts
- Use this component on single article pages only (where users are already viewing article content).
- Do not use this component more than once per page. If more articles are needed, please use the configurable options to increase the amount shown.
Design Notes
This component is stacked on desktop screens, and moved to the bottom of the article page when on tablet and mobile screens.
Configurable Options
This component is configured using Child pages, Fixed list, Search or Tags. Fixed list pages will always stay the same, whereas tags will retrieve articles related to that tag. Search pulls articles related to the search query entered, and Child pages pull articles from a set parent page.
Once configured, all other fields (title, image, excerpt) are automatically pulled from the Article: Header and will not require further input.
Developer Notes
Type |
Name |
---|---|
AEM Component Name |
Article: Card > Related |
Code Base Name |
list-related-stories |
resourceSupertype |
bclccorporate/components/content/list |
SCSS Attributes |
list-related-stories.scss |
JavaScript |
|
Status |
Released (RC 1) |
Version |
Code Base v1.0 |
Additional Information
- Image, Title, Category, and CTA Link is automatically retrieved from the article page via the Article: Header component
Designer Notes
Type |
Name |
---|---|
Sketch Component Name |
BCLC_Corporate_Designs/components/article/card/related |
Sketch Responsive Sizes |
Desktop HD, Desktop, Tablet, Mobile |
Status |
Released (Master) |
Version |
Design 1.0 |