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 pagesFixed 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