TestimonialBand

Testimonial band.

DesktopPhone

View code

tsx

<TestimonialBand
	eyebrow="Testimonials"
	title="On-call teams sleep better"
	description="Thousands of teams watch their endpoints with us. Here is what a few of them say."
>
	<TestimonialBand.Quote name="Priya Natarajan" jobTitle="Staff SRE, Ledgerline" avatar="PN">
		We used to learn about outages from support tickets. Now the Slack alert lands <strong>before the first customer notices</strong>, and the status page updates itself.
	</TestimonialBand.Quote>
	<TestimonialBand.Quote name="Marcus Webb" jobTitle="CTO, Fernwood" avatar="MW">
		Setup took five minutes. I pasted our health check URLs and was done.
	</TestimonialBand.Quote>
	<TestimonialBand.Quote name="Lucía Ortega" jobTitle="Engineering manager, Tidepool" avatar="LO">
		The thirty-second checks caught a certificate that expired at 3am on a Sunday. Escalation woke the right person, the fix shipped in twelve minutes, and the monthly SLA report still came out at <strong>99.98%</strong>. That report is now the first thing our enterprise customers ask for.
	</TestimonialBand.Quote>
	<TestimonialBand.Quote name="Daniel Kim" jobTitle="Founder, Brightdesk" avatar="DK">
		Our status page on our own domain made us look like a much bigger company than we are.
	</TestimonialBand.Quote>
	<TestimonialBand.Quote name="Hannah Becker" jobTitle="Platform lead, Northwind Freight" avatar="HB">
		Six regions means we finally see when it is <strong>only Singapore</strong> that is slow, instead of guessing from one probe in Virginia.
	</TestimonialBand.Quote>
	<TestimonialBand.Quote name="Omar Haddad" jobTitle="Solo developer" avatar="OH">
		The free plan covers all my side projects. When one of them started making money, upgrading took one click.
	</TestimonialBand.Quote>
</TestimonialBand>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { TestimonialBand } from "@sdxc/ui/landing";

Renders a testimonial band with a chapter header and a quote grid of one column on a phone, two from the md container and columns from lg, evened per quote count with a short last row centred. Cards in a row stretch to one height, captions on one line.

Composition

The parts the component publishes, each a static property of the host.

TestimonialBand
TestimonialBand.QuoteOne testimonial card: the quote in a <blockquote> that grows to the row's height and the speaker in a <figcaption> at its foot, with an optional round avatar.

Examples

Featured quote and carousel

Open in a new tab

DesktopPhone

View code

tsx

<TestimonialBand
	title="Teams that sleep through the night"
	layout="carousel"
	featured={
		<TestimonialBand.Quote
			variant="featured"
			logo={<img src={northwind} alt="Northwind" />}
			name="Ana Ruiz"
			jobTitle="VP Engineering, Northwind"
			href="/customers/northwind"
		>
			Alert noise fell <strong>by 83% in the first month</strong>, and nobody has been paged for a false positive since.
		</TestimonialBand.Quote>
	}
>
	<TestimonialBand.Quote name="Ben Okafor" jobTitle="SRE, Voltage" avatar="BO" href="/customers/voltage">…</TestimonialBand.Quote>
	…
</TestimonialBand>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`columns`	`Columns`	No	Columns from the `lg` container. Defaults to DEFAULT_COLUMNS.
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`eyebrow`	`RemixNode`	No	Optional eyebrow above the title.
`title`	`RemixNode`	Yes	Section title — required, always supplied by the page.
`description`	`RemixNode`	No	Supporting lead under the title.
`layout`	`"grid" \| "carousel"`	No	Arrangement of `children`. Defaults to `"grid"`.
`carouselLabel`	`string`	No	Accessible name of the carousel's scroll region. Defaults to "Testimonials".
`featured`	`RemixNode`	No	One quote set full width above the rest, usually a `<TestimonialBand.Quote variant="featured">` with a hard number in it.
`children`	`RemixNode`	Yes	One TestimonialBand.Quote per testimonial.
`parts`	`PartsProps`	No	Per-part styling for title, lead, and quote grid.

Also accepts everything in Omit< LandingSection.Props, "children" | "tone" | "title" | "parts" >.

TestimonialBand.Quote

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	The quote; `strong` fragments render in the emphasis ink at the copy's weight.
`name`	`RemixNode`	Yes	Who said it.
`jobTitle`	`RemixNode`	No	Their job title and company, drawn muted under the name.
`avatar`	`RemixNode`	No	An `<img>` or initials, cropped to a round 2.5rem frame.
`variant`	`"card" \| "featured"`	No	Card look. Defaults to `"card"`.
`logo`	`RemixNode`	No	The customer's mark, above the quote; a featured card draws it in its own ink.
`href`	`string`	No	Links the customer story with a trailing line under the caption.
`linkLabel`	`RemixNode`	No	Text of the story link. Defaults to "Read the story".

Also accepts everything in Omit<TagProps<"figure">, "children">.

Types

Name	Values	What it decides
`Layout`	`"grid" \| "carousel"`	`grid` sets every quote in even rows; `carousel` sets them in one row that scrolls and snaps sideways, showing the next card's edge.
`QuoteVariant`	`"card" \| "featured"`	`card` is the regular quote; `featured` inverts the card, sets the quote large and leads with an optional `logo`.