Testimonial cards

Three cards with colored left border, quote, name, role, and auto-swappable profile image.

4 tokens

Preview

With names (pricing page)

Mr. Adebayo Ogundimu
School Director, Greenfield Academy Lagos

Mrs. Ngozi Eze
Head Teacher, Bright Future College Enugu

Mr. Ibrahim Suleiman
Bursar, Crescent International School Abuja

Without names (homepage)

“We went from tracking everything in notebooks to having a full system in under a week. The teachers adapted faster than I expected.”

School Director

Secondary school, Abuja

“Parents stopped calling the office to ask about results. They just check on their phones now. That alone saved us hours every week.”

Head Teacher

Private school, Lagos

“The fee collection used to be my biggest headache. Now I can see exactly who has paid and send reminders with one click.”

School Bursar

Secondary school, Port Harcourt

Usage

import { Testimonials } from '@/components/marketing/testimonials'

// Border colours cycle green, blue, amber. With a name, the card shows
// /media/testimonials/{name-slug}.png (e.g. adebayo-ogundimu.png),
// falling back to an initials circle until the photo exists.
<Testimonials
  testimonials={[
    { name: 'Mr. Adebayo Ogundimu', role: 'School Director', school: 'Greenfield Academy Lagos', quote: '...' },
    { role: 'Head Teacher', school: 'Private school, Lagos', quote: '...' }, // no name: no avatar
  ]}
/>

Tokens used

This component reads these tokens directly: change one on a Foundations page and it updates here and across the site.

Surface--ds-surface

#F5F7F5

Text primary--ds-text

#1E1E1E

Text muted--ds-text-muted

#6B7280

Body--ds-body

1rem