A single customer quote with attribution — for marketing pages (social proof rows, case-study pull-quotes). Composes `<al-avatar>` via the `avatar` slot for a headshot.
PLAYGROUND0 CONTROLS
PREVIEW / al-testimonial / SOUTHLEFT
Loading preview
Altitude let us ship a fully re-branded marketing site in an afternoon — same components, completely different look.
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
FIGMA AHEADSouthleft Design SystemFIGMA SET · Testimonial
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
3 ATTR · 2 SLOT · 0 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEtestimonial--DefaultPASS
Advanced statesAXE2 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 3 STORIES.
import '@southleft/al-web-components/components/testimonial';
import { ALTestimonial } from '@southleft/al-react';
API — 3 PROPS3 DOCUMENTED
PROPTYPEDEFAULT
attributionstringThe name of the person being quoted.—
attribution-rolestringJob title of the person being quoted, e.g. "VP of Engineering".
The attribute is `attribution-role`, **not** `role`. `role` is the ARIA
role attribute: `<al-testimonial role="VP of Engineering">` put a job title
where the accessibility tree expects a role name, and axe reported
`aria-roles` ("role attribute must use a valid value") on every
Testimonial story. `apps/southleft` had already worked around it by
writing the *property* from a `data-testimonial-role` attribute.—
companystringCompany/organization of the person being quoted.—
SLOTS2
SLOTDESCRIPTION
(default)The quote text.
avatarOptional avatar (typically an `<al-avatar>`).
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.