Card Style for Query Loop Posts (SCSS)
Turns each post in Query Loop blocks into a card with padding, rounded corners, a soft shadow and a lift on hover, for blog and archive templates in block themes.
Opens WPIDE on
Code
$card-padding: 1.25rem;
$card-radius: 10px;
$card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
$card-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.12);
.wp-block-post-template {
gap: 1.5rem;
> .wp-block-post {
padding: $card-padding;
border-radius: $card-radius;
background: var(--wp--preset--color--base, #fff);
box-shadow: $card-shadow;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover,
&:focus-within {
transform: translateY(-3px);
box-shadow: $card-shadow-hover;
}
.wp-block-post-featured-image {
margin: (-$card-padding) (-$card-padding) 1rem;
img {
border-radius: $card-radius $card-radius 0 0;
}
}
}
}
@media (prefers-reduced-motion: reduce) {
.wp-block-post-template > .wp-block-post {
transition: none;
&:hover,
&:focus-within {
transform: none;
}
}
}Notes
Change the variables at the top to match your design. Works with list and grid layouts.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.