TestimonialBlock
Composable testimonial card for ratings, review quotes, reviewer metadata, and optional media.
Quick Preview
Composition
Use the public subpath import and compose only the slots you need. TestimonialBlock is product-agnostic; keep routing, analytics, and review provider logic in the consuming app.
TestimonialBlock
├── TestimonialBlockMedia
│ └── TestimonialBlockPlayButton
├── TestimonialBlockContent
│ ├── TestimonialBlockRating
│ ├── TestimonialBlockQuote
│ └── TestimonialBlockFooter
│ ├── TestimonialBlockReviewer
│ └── TestimonialBlockActionUsage
import {
TestimonialBlock,
TestimonialBlockQuote,
TestimonialBlockRating,
} from "@giddaa-housing/ui/testimonial-block";
<TestimonialBlock>
<TestimonialBlockRating rating={5} source="Google" totalReviews={1} />
<TestimonialBlockQuote>
Their team elevated our brand with thoughtful design and sharp strategy.
</TestimonialBlockQuote>
</TestimonialBlock>;Examples
Default Testimonial Block
Tones
Use neutral for standard cards and brand for filled hero treatments.
5.01 Google review
Their team elevated our brand with thoughtful design and sharp strategy — a cohesive, compelling identity we're proud of.
Neutral
Orientation
Use horizontal when media should sit beside the testimonial copy on wider layouts. The example composes TestimonialBlockPlayButton as the trigger for Video Player Dialog, keeping playback behavior outside the testimonial primitive.
5.01 Google review
Their team elevated our brand with thoughtful design and sharp strategy — a cohesive, compelling identity we're proud of.
Vertical
Sizes
The size prop scales spacing, type, avatar, media, and action affordances.
5.01 Google review
Their team elevated our brand with thoughtful design and sharp strategy — a cohesive, compelling identity we're proud of.
Sm
5.01 Google review
Their team elevated our brand with thoughtful design and sharp strategy — a cohesive, compelling identity we're proud of.
Md
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "brand" | "neutral" | Switches the card surface, foreground, and action contrast. |
orientation | "vertical" | "horizontal" | "vertical" | Controls media/copy layout. Horizontal stacks on small screens. |
size | "sm" | "md" | "lg" | "md" | Scales internal density and media height. |
TestimonialBlockRating.rating | number | required | Rating value clamped to the 0-5 range and rendered as the score/stars. |
TestimonialBlockRating.source | ReactNode | - | Optional review source. Hidden when omitted. |
TestimonialBlockRating.totalReviews | number | - | Optional review count rendered with the source when provided. |
TestimonialBlockRating.reviewLabel | string | "review" / "reviews" | Overrides the generated review-count label. |
TestimonialBlockRating.showScore | boolean | true | Hides the numeric score when set to false. |
TestimonialBlockReviewer.name | string | required | Reviewer name rendered beside the avatar. |
TestimonialBlockReviewer.photo | string | - | Optional reviewer photo. Falls back to initials from name. |
TestimonialBlockReviewer.reviewerRole | ReactNode | - | Optional reviewer role, title, or company line. |
render | Base UI render prop | - | Changes the rendered element while preserving styles. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying slot element. |
Accessibility
- Keep
TestimonialBlocksemantic as anarticleunless the consuming context requires a different element viarender. TestimonialBlockStarshas a default accessible label; overridearia-labelwhen the rating is not five stars.TestimonialBlockActionincludes a default accessible name; provide a more specificaria-labelwhen multiple review links appear together.- Provide meaningful
alttext for informative reviewer or video images. Use emptyalt=""only for decorative thumbnails. - For video testimonials, use Video Player Dialog with
TestimonialBlockPlayButtonas its trigger. This provides consistent focus management, controls, fullscreen behavior, and playlist support.