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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Monospace parenthetical eyebrow above the wordmark, e.g. "(about us)". |
| wordmark | string | none | Bold company name rendered above the statement. |
| statement | string | none | Large centered statement, the card's focal copy. |
| logos | string[] | [] | Logo strip below the statement; hidden entirely when empty. |
| stats | StatItem[] | none | Four-column stats band at the bottom of the card, above a top border. |
| className | string | none | Extra 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.
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.