Components / Website

Testimonial

Mode-inspired testimonial layouts. A stepped lime card holds the quote and attribution, with an oversized ,, mark in a bottom-left cutout. An optional square portrait sits top-aligned to the right. TestimonialBlock is the same card without a portrait for full-width dark sections.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/testimonial/registry.json

Card: alternative

Bright lime card on a light background. Quote marks sit in the bottom-left cutout on the page background. Portrait is a separate square image, top-aligned to the card.

alternative · with portrait

Instant Strata saves approximately 30% of my time, so I can focus on the issues that actually matter to owners.

Sarah Mitchell

Senior Strata Manager

Coastal Strata Co.

Read story

tsx

import { Testimonial } from "@/components/ui/testimonial"

<Testimonial
  quote="Instant Strata saves approximately 30% of my time, so I can focus on the issues that actually matter to owners."
  name="Sarah Mitchell"
  role="Senior Strata Manager"
  company="Coastal Strata Co."
  portrait={{ src: "/img/people/1.webp", alt: "Sarah Mitchell" }}
  cta={{ label: "Read story", href: "/stories/sarah" }}
  type="alternative"
/>

Card: dark section

The primary homepage pattern from Mode.com: bright lime card on a forest section, square portrait to the right, company logo in the attribution row.

dark · with portrait

Instant Strata is incredibly valuable as a full stack platform from strata managers all the way to committee members. Managers can go deep, owners get the updates they need, and our team gets to make everyone part of the strategy.

James O'Brien

Building Manager

Harbor View Strata

tsx

import { Testimonial } from "@/components/ui/testimonial"

// Inside a forest Section: bright lime card on dark background
<Section type="primary" contained>
  <Testimonial
    quote="Instant Strata is incredibly valuable as a full stack platform from strata managers all the way to committee members."
    name="James O'Brien"
    role="Building Manager"
    company="Harbor View Strata"
    portrait={{ src: "/img/people/2.webp", alt: "James O'Brien" }}
    type="dark"
  />
</Section>

Card: primary

Forest card on a light background. Quote marks use lime in the cutout. CTA switches to lime fill.

primary · without portrait

The levy notice workflow used to take our team a full day. Now it's done before morning tea.

James O'Brien

Building Manager

Harbor View Strata

Read story

tsx

// Forest card on a light section: quote marks use lime in the cutout
<Testimonial
  quote="The levy notice workflow used to take our team a full day. Now it's done before morning tea."
  name="James O'Brien"
  role="Building Manager"
  company="Harbor View Strata"
  type="primary"
/>

Block: without portrait

Same stepped cutout card at full width when a portrait is not needed.

dark section · block variant

Instant Strata saves approximately 30% of my time, so I can focus on the issues that actually matter to owners.

Sarah Mitchell

Senior Strata Manager

Coastal Strata Co.

Read story

tsx

import { TestimonialBlock } from "@/components/ui/testimonial"

// Full-width variant without a portrait
<TestimonialBlock
  quote="Instant Strata saves approximately 30% of my time, so I can focus on the issues that actually matter to owners."
  name="Sarah Mitchell"
  role="Senior Strata Manager"
  company="Coastal Strata Co."
  type="dark"
  size="lg"
  cta={{ label: "Read story", href: "/stories/sarah" }}
/>

Block: size variants

light section · sm / md / lg sizes

Managing strata used to mean spreadsheets and sticky notes. Not anymore.

Sarah Mitchell

Senior Strata Manager

Managing strata used to mean spreadsheets and sticky notes. Not anymore.

Sarah Mitchell

Senior Strata Manager

Managing strata used to mean spreadsheets and sticky notes. Not anymore.

Sarah Mitchell

Senior Strata Manager

Section context guide

Section backgroundRecommended typeNotes

white / defaultalternativeBright lime card on white

secondary (off-white)alternative or primaryLime for Mode-style; forest for high contrast

primary (forest)darkBright lime card: use Testimonial with portrait

alternative (lime-soft)primaryForest card on lime-soft accent

Testimonial Props

Prop	Type	Default	Description
quote	string	-	The testimonial text. Rendered in Young Serif display font.
name	string	-	Person's full name.
role	string	-	Job title or role.
company	string	-	Company or organisation name shown beside the logo.
companyLogo	ReactNode	-	Company logo: any img, svg, or icon. Sized to h-5 automatically.
portrait	{ src: string; alt?: string }	-	Portrait photo. Renders as a square card top-aligned to the right of the quote card. Hidden below sm breakpoint.
cta	{ label: string; href: string }	-	Optional call-to-action link in the attribution row. Forest button with lime text on lime cards.
type	"alternative" \| "primary" \| "dark"	"alternative"	Card colour. alternative = bright lime on light sections. primary = forest on light sections. dark = bright lime card for use inside a forest Section.

TestimonialBlock Props

Extends Testimonial props (without portrait).

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Quote text size. lg suits hero-adjacent sections; sm suits sidebar or compact contexts.
type	"alternative" \| "primary" \| "dark"	"dark"	Card colour. Uses the same stepped cutout layout as Testimonial, without a portrait.