About Statement With Pillars
Centered statement heading with a monospace parenthetical eyebrow, followed by a three-up row of icon pillars, each a circular badge paired with a title and one-line description.
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-with-pillars.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about59.tsx instead.
Usage
The file also exports about59Demo, 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 { About59, about59Demo } from "@/components/blocks/about/about59"; export default function Page() { return <About59 {...about59Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Small parenthetical label above the statement, e.g. "(what we believe)", rendered in monospace. |
| statement | string | none | Large centered statement heading. |
| pillars | Pillar[] | none | Three-up row of icon badge, title, and one-line description. |
| className | string | none | Extra classes for the outer section element. |
Types
type Pillar = { icon: LucideIcon; title: string; description: string; };
Behavior notes
- The eyebrow reuses About58's monospace parenthetical convention (e.g. "(what we believe)"), but About59 has no wordmark, logo row, or stats band underneath, it goes straight from statement to pillars.
- Pillars render as borderless, centered items with a circular icon badge, unlike About16's bordered cards with a square icon badge and left-aligned copy, and unlike About64's six-item bordered card grid, About59 is fixed at three pillars with no surrounding border.
- Every pillar is required to have an icon; there is no icon-less fallback, so callers must always supply a LucideIcon component per pillar.
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.