# Testimonial Card Styles (SCSS)

> Styles the [testimonials] grid as soft cards with a large quote mark, gold stars and a clear attribution line that adapt to light and dark themes.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, testimonials, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/testimonials-cards-scss/

## Code

```scss
$accent: #f5a524;
$radius: 12px;

.testimonials-grid {
    .testimonial {
        position: relative;
        margin: 0;
        padding: 1.75rem 1.5rem 1.25rem;
        border-radius: $radius;
        background: color-mix(in srgb, currentColor 5%, transparent);

        &::before {
            content: "\201C";
            position: absolute;
            top: 0.25rem;
            right: 1rem;
            font-size: 4rem;
            line-height: 1;
            opacity: 0.15;
        }
    }

    blockquote {
        margin: 0 0 1rem;
        padding: 0;
        border: 0;
        font-style: italic;

        p:last-child {
            margin-bottom: 0;
        }
    }

    .testimonial-rating {
        display: block;
        margin-bottom: 0.5rem;
        color: $accent;
        letter-spacing: 0.1em;
    }

    figcaption {
        font-size: 0.9em;

        span {
            opacity: 0.75;
        }
    }
}
```

## Notes

Change $accent and $radius at the top. Pairs with the Testimonials Grid Shortcode snippet.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Testimonial Card Styles (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/