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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| numeral | string | none | The oversized digit or number, e.g. a founding year or team size. |
| numeralCaption | string | none | Small caption under the numeral explaining what it represents. |
| heading | string | none | Heading next to the numeral. |
| description | string | none | Paragraph next to the numeral. |
| strip | MediaSlotImage[] | [] | Row of small square photos below the numeral/heading pair, 3 per row on mobile and 6 on larger screens. |
| className | string | none | Extra 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.
More About Blocks
View all →team-mission
Team & Mission
Two-column about section with mission statement, company stats, and team member grid.
values-with-team-photo
Values with Team Photo
Full-width photo with a three-column values grid below.
timeline-milestones
Timeline & Milestones
Company stats on the left and a vertical timeline of milestones on the right.
founder-quote-team
Founder Quote & Team
Founder blockquote with avatar, followed by a horizontal team member row.
image-text-split
Image & Text Split
Tall image on the left, company story, inline stats, and CTAs on the right.
numbered-principles
Numbered Principles
Heading on the left and numbered company principles on the right.