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.
Opens WPIDE on
Code
$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 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.