Mighty Studio template

Testimonials — Selectable Avatars

By Jocelyn Nadeau

A testimonials block where learners click an avatar to bring that person's quote, name, role, and optional rating into view. Authors add 3 to 5 testimonials and choose between three layouts: avatars beside the quote in a bordered card, avatars beside the quote with the active person's photo enlarged inside the card itself, or avatars below the quote in a speech-bubble card whose tail points at the selected avatar. Each testimonial supports an optional headline, an optional star rating (shown or hidden globally), and name/role can be left blank when not needed. Appearance is themeable (light/dark/neutral, highlight color, card corner radius, quotation mark on/off), and the avatar-in-card layout adds its own controls for the photo ring and independent vertical alignment of the avatar versus the text. Completion can fire on load or only after the learner has visited every testimonial. Fully keyboard-operable (arrow keys move between avatars, Enter/Space selects) with live-region updates for screen readers, WCAG AA color contrast, unique element IDs when placed multiple times on a page, and respect for reduced-motion preferences.