Staaarter

Numeral About

About section anchored by one oversized numeral (e.g. a founding year) with a caption beside a heading and paragraph, followed by a horizontal strip of small square photos.

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 media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/numeral-about.json

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

Usage

The file also exports about39Demo, 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 { About39, about39Demo } from "@/components/blocks/about/about39";

export default function Page() {
  return <About39 {...about39Demo} />;
}

Props

PropTypeDefaultDescription
numeralstringnoneThe oversized digit or number, e.g. a founding year or team size.
numeralCaptionstringnoneSmall caption under the numeral explaining what it represents.
headingstringnoneHeading next to the numeral.
descriptionstringnoneParagraph next to the numeral.
stripMediaSlotImage[][]Row of small square photos below the numeral/heading pair, 3 per row on mobile and 6 on larger screens.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The numeral is plain static text at text-8xl/9xl sizes with a caption underneath, not a count-up animation, per the rule that any animated inspiration collapses to a static equivalent; this differs from About8 which pairs each stat with a description rather than a single hero numeral.
  • The photo strip is a fixed-size grid of square crops (3 columns on mobile, 6 on desktop) distinct from About20's team photo list, since these images are not necessarily people and carry no name/role labels, only alt text.
  • There is no CTA or button row in this block, unlike About14 and About38; it is intentionally a compact, single-purpose stat-plus-strip layout.