hlxsites/vg-volvotrucks-us

FR: [v2-visual-grid]: Add magazine article variant

Closed this issue · 1 comments

ZoeBeykirch commented

Context/Description

As a content author, I would like to display two, or three images within the magazine article text so that it would create a more visually captivating reading experience.

The behavior of this block will follow the existing block, while the grid will have a different structure
New block name: v2-visual-grid

Acceptance Criteria

User AC:

  • Magazine readers shall view images within articles, appearing inline and displayed side by side, perfectly aligned with the accompanying article text.

Editor AC:

  • This ticket will follow the behaviour of the existing masonry grid with a different grid layout
  • Editors can use images either placing it with a manual upload or using AEM Assets.
  • Editors can use this block variant on any page.
  • Editors can find this block in the Sidekick library.

Non-functional AC:

  • Two images shall be displayed side by side following an aspect ratio of 4:3 for desktop, tablet and mobile devices. (456x342 desktop/tablet and 168 (167)x126 mobile).
  • Three images coupled together shall use the same 2 image block ratio rules to display the first two on top, side by side, and then use the one image ratio rules to display the 3rd image below
  • (existing:) Padding above and below inline images and text shall default to 24px
  • (existing:) Padding between images shall default to 20px on desktop, 16px on tablet, 8px on mobile
  • (existing:) The block shall have a responsive design that can adapt well to different screen sizes and devices.
  • (existing:) The block shall have alt text to ensure it following all accessibility and SEO requirements.

Out of scope

When one image needs to be displayed, it can be placed in the article without the need of using this block.

Attachment / link to Figma

Existing block design:
https://www.figma.com/design/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=666-16084&t=WcDPUseISG4ZZ2t8-4

Two images

Three images

AsmitKMishra commented

Testing Completed.

  1. Layout matches with Figma design.
  2. Aspect Ratio matches with Figma design in both desktop and mobile.
  3. padding between the images are not exactly as mentioned but it is within the margin.