ProofStrip

Trust band placed immediately after a hero: a LogoCloud, a StatStrip, or both stacked.

DesktopPhone

View code

tsx

<ProofStrip>
	<LogoCloud layout="spread" label="Trusted by on-call teams at" muted>
		<img src={northwind} alt="Northwind" />
		<img src={voltage} alt="Voltage" />
		<img src={layerline} alt="Layerline" />
		<img src={fernway} alt="Fernway" />
		<img src={quadrant} alt="Quadrant" />
	</LogoCloud>
	<StatStrip>
		<StatStrip.Item label="Checks run every day">4.2M</StatStrip.Item>
		<StatStrip.Item label="Probe regions">6</StatStrip.Item>
		<StatStrip.Item label="Median alert latency">38s</StatStrip.Item>
	</StatStrip>
</ProofStrip>

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 { ProofStrip } from "@sdxc/ui/landing";

Renders a compact ruled band for adopter marks and/or numeric proof.

Examples

tsx

<ProofStrip>
	<StatStrip>
		<StatStrip.Item label={t("stats.uptime")}>99.99%</StatStrip.Item>
	</StatStrip>
</ProofStrip>

Props

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

Prop	Type	Required	Description
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`children`	`RemixNode`	Yes	Proof content — typically a LogoCloud, a StatStrip, or both stacked.

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