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 |