Company Heritage & Features
Company story with an image, border-accented feature highlights, and a stats row. Suited to craft, heritage, and product-focused brands.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, media-slot dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/company-heritage-features.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about24.tsx instead.
Usage
The file also exports about24Demo, 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 { About24, about24Demo } from "@/components/blocks/about/about24"; export default function Page() { return <About24 {...about24Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | { label: string; variant?: BadgeVariant } | none | Optional pill above the heading. |
| heading | string | none | Section heading. |
| story | string | none | Story paragraph next to the image. |
| photo | MediaSlotImage | undefined | Image beside the heading and story, falls back to a placeholder. |
| features | FeatureHighlight[] | none | Feature highlights rendered as a 3-column grid, each with a left accent border. |
| stats | StatItem[] | [] | Stat row across the bottom, above a top border. |
| className | string | none | Extra classes for the outer section element. |
Types
type FeatureHighlight = { icon: LucideIcon; title: string; description: string; }; type StatItem = { title: string; value: string };
Behavior notes
- The image sits to the left of the heading/story pair, the mirror of About5's layout, and this block adds a feature grid and stats row below that About5 does not have.
- features renders with a left accent border per card (border-l-2) rather than About16's boxed 3-column cards or About17's divided list, giving a lighter, more editorial feel suited to heritage copy.
- stats is optional and, when present, sits below a top border under the feature grid, centered like About14's stat row rather than left-aligned like About5's inline stat list.
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.