Article: Card > Featured-4

This component offers a preview of 4 articles horizontally across the page.

Usage Criteria

This component previews 4 featured articles in horizontally laid out cards. Users can get a snapshot of each story and optionally click to view the full article if they want more information.

Do's and Don'ts

  • Avoid using this component more than once per page, as having more than one can look cluttered (although there are exceptions). When used more than once per page, do not put them together or without some dividing content.

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) are automatically pulled from the Article: Header and will not require further input.

Developer Notes

Type
Name
AEM Component Name

Article: Card > Featured-4

Code Base Name

list-article-card

resourceSupertype

core/wcm/components/list/v2/list 

SCSS Attributes

list-article-card.scss

JavaScript

list-article-card.js

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/featured-4

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0