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 / ALTITUDE
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 PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
3 ATTR · 2 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
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.