Testimonial Cards Section
Testimonial sections build trust and social proof. This build creates a responsive grid of testimonial cards with avatar, quote, star ratings, and smooth hover effects - a component found on nearly every business website.
Testimonial Card Design
- Quote icon - Large decorative quotation mark using ::before pseudo-element or Unicode ❝
- Avatar with name - Flex row: circular image + name & title stack
- Star rating - Unicode stars ★☆ or SVG icons colored with CSS
- Card layout - White card with subtle shadow, padding, and rounded corners
- Grid - auto-fit grid for responsive column count. Cards maintain equal height
- Hover - Subtle lift with translateY and enhanced shadow on hover
Testimonial Card Code
/* Testimonial card styles */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.testimonial-card {
background: white;
border-radius: 16px;
padding: 28px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/* Decorative quote mark */
.testimonial-card::before {
content: '❝';
font-size: 3rem;
color: #667eea;
opacity: 0.3;
position: absolute;
top: 16px; right: 24px;
}
/* Quote text */
.quote { color: #555; line-height: 1.7; font-style: italic; margin-bottom: 20px; }
/* Author section */
.author { display: flex; align-items: center; gap: 12px; }
.author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.author-name { font-weight: 600; color: #1a1a2e; }
.author-title { font-size: 0.85em; color: #999; }
/* Stars */
.stars { color: #f39c12; margin-bottom: 12px; letter-spacing: 2px; }Tip
The decorative quote mark (::before content: '❝') with large font-size and low opacity adds visual interest without HTML markup. It's a universal pattern for testimonial cards that signals 'this is a quote' instantly.
Grid handles two-dimensional layouts - rows AND columns simultaneously
Common Mistake
Making testimonial cards different heights that create an uneven grid. Use Grid (not Flexbox) for the container - Grid automatically stretches cards to equal height. For varied-height cards, consider a masonry-style layout.
Practice Task
Build a testimonial section: (1) 3-column auto-fit grid of quote cards, (2) Each card has a quote, avatar (border-radius: 50%), name, title, and star rating, (3) Decorative '❝' via ::before, (4) Hover lift effect.
Quick Quiz
Key Takeaways
- Testimonial sections build trust and social proof.
- Quote icon - Large decorative quotation mark using ::before pseudo-element or Unicode ❝
- Avatar with name - Flex row: circular image + name & title stack
- Star rating - Unicode stars ★☆ or SVG icons colored with CSS