FR: MT Image with Card Solutions Block

[DanielaPedrochevd]

Agile Requirement
As a business owner, I want to display an image with some descriptive text and related links so that my client can get more information on my products and its technical advantages.

Description
Create an image with card block that will allow editors to add it to any page and configure it by adding an image, a header, text, a button and a maximum of 6 links, this block will have 2 variants (left image or right image)

Acceptance Criteria
1- As an editor, I can add the new "image with card" block to any page.
2- As an editor, I can select any of the two variants of this block.

• Left Image (default)
• Right Image

3- As an editor, I can configure any of the above-mentioned variants by adding an Image, a header, text, a button, a subtitle and a maximum of 6 links (which will be displayed in 2 columns in desktop version and one under the other in the mobile version). It's the editor's responsibility to stay within the 6 links limit.
4- The new block and its variants follow the Figma design for mobile and desktop:

- Left Image (desktop)
- Left Image (mobile)
- Right Image (desktop)
- Right Image (mobile)

5- For the tablet viewport, we will copy the #11 solution, adapting it to this block's style.

Technical hint

The positioning of the images and cards (overlapping diagonally) is something that was also used in the #11 implementation so that code can be reused.

[WendyKruger]

adding screenshots of Figma file here for my reference:

[shirin27]

Kamino cloned this issue to hlxsites/vg-macktrucks-com