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.
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:
Editor AC:
Non-functional AC:
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
Desktop/tablet: 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
Three images
Desktop/tablet: 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