Link to a page on a card with an image and title

Site URL: https://www.beyondinsights.co.uk/home-new

Hello,

I'm trying to create the attached design in Squarespace (see image below). I'm having a lot of trouble creating the card in the bottom right of the design linking to the latest article. Is this even possible? The best I can do is draw a rectangle shape with a drop shadow, add an image and some text but the layout doesn't work across different screen sizes. site https://www.beyondinsights.co.uk/home-new

If you scroll into the next section you can see other ways i've tried creating this card - all with their limitations. Any help would be much appreciated @tuanphan 

I can see in the second section you've tried using a summary block and that's the option I'd have suggested as well as it removes the need to manually update that card for every new article.  

You can add this to your custom CSS to style the summary block:

/* Remove padding and margin from summary block item */
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

/* Add drop shadow to summary block */
.sqs-block-summary-v2 {
 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 
}

/* Set "Latest Article" tag background */
.sqs-block-summary-v2 .summary-metadata-item {
background: #0d1bdc;
color: #fff;
opacity: 1;
padding: 0.1em 0.6em; 
}

/* Increase title font weight */
.sqs-block-summary-v2 .summary-title {
font-weight: 600;
}

And of course make sure you've resized the block so there's no additional space underneath. Let me know if you need any more tweaks!

@katycarlisle Wow, thanks! Thats a massive help but I'm still struggling to get the layout consistent across different screen sizes though... eg. on mobile the image is too big with too much padding beneath it (see attached screenshot). It looks great at 1440x900 - Is it possible to get it looking as similar to this across smaller/larger screen widths? Would it help if the article image was a fixed size? Thank you for your help

You can use the code below to change the size of the image on smaller screens. 

In the Squarespace mobile editor view are you able to resize the block to reduce the space at the bottom? 

/* Reduce image width on mobile */

@media screen and (max-width: 575px) {
   .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
        width: 30% !important;
    }
}

Many thanks again @katycarlisle - it kinda works - but i've noticed when resizing the browser and on mobile that if the title drops onto three lines the space beneath the image becomes uneven - see attached screenshot. Do you have any ideas? Thanks!

Thanks so much @katycarlisle - you legend, love it - works beautifully!