Staaarter

About Statement Card

About section rendered on a single soft muted card: a monospace parenthetical eyebrow, a bold company wordmark, a large centered statement, a logo strip, and a four-column stats band, all inside one rounded card.

By Staaarter Team
About
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/about-statement-card.json

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

Usage

The file also exports about58Demo, 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 { About58, about58Demo } from "@/components/blocks/about/about58";

export default function Page() {
  return <About58 {...about58Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedMonospace parenthetical eyebrow above the wordmark, e.g. "(about us)".
wordmarkstringnoneBold company name rendered above the statement.
statementstringnoneLarge centered statement, the card's focal copy.
logosstring[][]Logo strip below the statement; hidden entirely when empty.
statsStatItem[]noneFour-column stats band at the bottom of the card, above a top border.
classNamestringnoneExtra classes for the outer section element.

Types

type StatItem = { title: string; value: string };

Behavior notes

  • Unlike About9, which renders its mission statement and logo strip directly on bg-background, this block wraps everything, statement, logos, and stats, inside a single bg-muted/30 rounded card, so the whole section reads as one contained unit rather than a page-width strip.
  • eyebrow uses a monospace font specifically (font-mono), a treatment no other about block in the library uses; it is optional and the wordmark line above the statement shifts up when omitted.
  • The stats band sits inside the same card as the statement, above a top border, closer to About14's stats-plus-story-card pairing than to About1 where stats and team live in separate columns outside any card wrapper.