# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Archives](https://wpide.com/library/category/archive/)
- Tags: scss, query-loop, cards
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/query-loop-card-style-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Card Style for Query Loop Posts (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/