Article: Card > Featured
This component previews a single featured article and has a short introduction.
![Abbotsford Food Bank](/content/dam/bclccorporate/articles/community/stories/vancouver-coast-and-mountains/abbotsford-food-bank/Abbotsford_Food%20Bank.jpg)
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