Blog listing cards

[simesy]

As a content author i want the blog page to not be ugly.

Acceptance criteria

1. 12 per page
2. Breakpoints:

• mobile = 1x12
• tablet = 2x6
• desktop = 3x4

3. Initial card design to be determined, opportunity to innovate here using the hero image and summary field.
4. Article to have a Drupal "Card" display mode with one twig that is @container query aware
5. Infinite scroller
6. Some cards have no image/hero (i don't want to use a default), some cards have a video where the thumbnail could be used as an image.
7. Basic cypress test to access the blog and see the 13th card after scrolling - this will need add least 12 articles provided by the fs_test module.

[febdao]

hi Si,
I've created a quick demo for the listing cards:
Please take a look and give me a feedback if it need to be updated.

[simesy]

I will think about this. My thinking is:

• more obvious hover effect
• sometimes there is no hero image

[simesy]

I've updated the acceptance criteria to explain that sometimes there is no hero image.

[febdao]

Hi @simesy ,
How about these one?

1. https://codepen.io/wikyware-net/pen/dyKPRxQ
2. https://codepen.io/aaroniker/pen/yLEPJXj
3. https://codepen.io/jh3y/pen/rNyRNXE

[simesy]

@febdao yes the 1.) is good.

• The corner colour just brand red.
• On the hover state, please use the hero background image if it is set on the node

There will be some a11y adjustments with the background image, but getting the inital card with animation up and running would be awesome.