Image Collage Block (name TBD)

Gonzalo-CG commented 1 year ago

Description

The Bulldog Magazine Blog page contains an image collage-like component that displays elements following a grid pattern on desktop viewports (on mobile, the structure is simply one image below the other as seen on Figma):

Each element consists of an image with text overlayed on its bottom-left corner, and we will add a gradient to address accessibility concerns regarding the readability of the text.

These featured blogs have to be manually added by authors to the block by adding the link to the desired articles to feature, and the Image, Blog Category, and Blog Title will be pulled from the linked blog's metadata.

Design: here in Figma

Acceptance Criteria

[ ] The Image Collage Block is available for authors to use on any page.
[ ] The Image Collage Block has the same design for Desktop & mobile as shown in Figma.

Open Questions

~~Should there be any hover effect on the block's elements?~~ --> Yes, see: https://www.figma.com/file/oNwe2jHIICPMIe551EY62l?node-id=2222:50863&mode=design#595563726

BeckyMedlin commented 1 year ago

@WendyKruger Please see "Open Questions" above.

Andrei-Boiangiu commented 1 year ago

to cover Section Metadata: Horizontal Separator #130 with this when deployed

WendyKruger commented 12 months ago

Per comment from Matt here: https://www.figma.com/file/oNwe2jHIICPMIe551EY62l?node-id=2222:50863&mode=design#595563726 there should be a hover effect to enlarge image. Note: he also commented that there should be arrows for the nav instead of dots. the figma file is updated.

shirin27 commented 8 months ago

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

Netcentric / vg-macktrucks-com-rd