Testimonial¶
Placeable in Canvas
A quote with a portrait and attribution, side by side (Compact) or stacked on top (Stacked).
Usage
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
quote |
Required | string | The quote, without quote marks. | Switching to this platform cut our onboarding time in half and the support team actually knows our account when we call. |
name |
Optional | string | Name | Marcus Chen |
role |
Optional | string | Job title, company or program, shown under the name. | Director of Operations |
image |
Optional | object | Portrait | |
color_scheme |
Optional | enum | Dark puts this on a dark background with light text. Defaults to light. |
light, dark |
layout |
Optional | enum | Compact puts the portrait beside the quote. Stacked keeps it on top, for narrow columns. Defaults to compact. |
compact, stacked |
image 1:1 — the portrait is cropped square at every layout.
A testimonial looks like bootstrap_components:blockquote at a glance — reach for a plain blockquote instead when a cited quotation with no portrait, layout choice or variant is all you need. It was ported from the d11 theme into IXM Blocks once it had proven useful across projects — see Building a new component.
Tokens used by this component
| Token | Default |
|---|---|
--ixm-testimonial-image-max |
13.5rem |
--ixm-testimonial-mark-opacity |
0.15 |
--ixm-testimonial-mark-size |
5rem |
--ixm-testimonial-radius |
var(--theme-radius-lg, var(--bs-border-radius-lg, 0.5rem)) |
--ixm-testimonial-surface |
(unset — var(--theme-color-surface-subtle, var(--bs-tertiary-bg)) until a theme sets it) |