FR: V2 Content Card

[ZoeBeykirch]

Context/Description

As a content editor, I want to improve the presentations of articles to enhance the user engagement and visual appeal. This can be an update of the v2-content-card existing block https://main--vg-volvotrucks-us--hlxsites.aem.page/drafts/alan/v2-content-card

Acceptance Criteria

User AC:

• On mobile devices, cards are displayed on top of each other
• On tablet devices, the cards are displayed in a two-column grid
• On desktop devices, the cards are displayed in a three-column grid
  • The cards have a maximum width of 21rem, as in use elsewhere in VT
• The entire card is clickable and links to the magazine article page
• The hover state of the tertiary button is shown when hovering the card
• The main link text will be the title of the article, so that the SEO and accessibility guidelines are followed
• All cards in the same row will be the same height

Editor AC:

• Editors can use this new block on any website page

Nonfunctional AC:

• Card element contains:
  • Image thumbnail
  • Article Title
  • Metadata text for date above the article title
  • Tertiary button

Current content card contains

• Image thumbnail
• Title
• Text

Attachment / link to Figma

Desktop: https://www.figma.com/file/c2jG1bOcvle2bCmZqgptyS/Magazine-C%26T?type=design&node-id=1518%3A6694&mode=dev

Mobile: https://www.figma.com/file/c2jG1bOcvle2bCmZqgptyS/Magazine-C%26T?type=design&node-id=1518%3A6694&mode=dev

Out of Scope

• Cards with grey background at the top of the page will be a variant taken up in a new ticket @mollyaljenkins
• On tablet 9 cards will be shown in two columns, there will then be one empty spot, this is to be taken up after pagination

Note

V2-Content-Card existing block

• Currently only contains a title and a text
• CTA button link would need to be added

https://inclusive-components.design/cards/

Previous suggestions @ZoeBeykirch :

There is a similar existing block called "Teaser Cards" that is not part of the existing redesign blocks, but follows all of the desired card elements functionality.

The "V2 Resources Gallery" follows the desired design, but would require images instead of videos, remove the section heading, and removes tertiary button toggle requirements.

[cogniSyb]

@ZoeBeykirch This should rather be an update of [v2-content-card] or a new block

[BeckyMedlin]

@cogniSyb @mollyaljenkins @ZoeBeykirch Confirmed with @williebender that it's ok to produce the clickable cards without the "Read More" CTA initially.