Staaarter

Clients & Outcomes

Client logo cloud paired with measurable engagement outcomes. Combines a plain-text wordmark strip with a row of outcome stat tiles to build credibility with numbers, not just names.

By Staaarter Team
Agency
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/clients-outcomes.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/agency/agency20.tsx instead.

Usage

The file also exports agency20Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Agency20, agency20Demo } from "@/components/blocks/agency/agency20";

export default function Page() {
  return <Agency20 {...agency20Demo} />;
}

Props

PropTypeDefaultDescription
headingReactNodenoneCentered section heading.
descriptionstringnoneOptional supporting copy under the heading.
clientsstring[][]Client names rendered as a plain-text wordmark strip.
outcomesOutcomeStat[][]Stat tiles rendered below the logo strip.
classNamestringnoneExtra classes for the outer section element.

Types

type OutcomeStat = { value: string; label: string };

Behavior notes

  • clients is a plain list of names, not image URLs; like About9 this renders text wordmarks rather than logo images, so it never depends on an external asset loading.
  • Both the logo strip and the outcome-tile grid are omitted entirely when their respective array prop is empty.
  • outcomes.value is a plain formatted string (e.g. "4.2x", "38%"), not a live-computed number; there is no counting animation.