Article: Card > Featured

This component previews a single featured article and has a short introduction.

Abbotsford Food Bank

Community Benefits

Abbotsford Food Bank

Feeding residents for over 50 years

Usage Criteria

This component previews featured articles so users can get a snapshot of the story and optionally click to view the full article if they want more information.

Do's and Don'ts

  • Do not use this component more than once per page, as this is meant to draw attention and create a focal point; having more than one can clutter the page.

Design Notes

In this component, there is a short introduction under the title. If you are looking for an excerpt instead of the introduction, choose the component Article: Card > Featured (Excerpt), as they are very similar in functionality.

Configurable Options

This component is configured using Static page or Tags; static pages will always stay the same, whereas tags will retrieve the most recent article related to that tag.

Once configured, all other fields (title, image, introduction) are automatically pulled from the Article: Header and will not require further input.

Developer Notes

Type
Name
AEM Component Name

Article: Card > Featured

Code Base Name

featured-story

SCSS Attributes

featured-story.scss

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

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0


Additional Information

  • Image distortion may occur when using image override, this can be safely ignored as it won't happen on the real site