Company Profile
Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages.
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/company-profile.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about13.tsx instead.
Usage
The file also exports about13Demo, 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 { About13, about13Demo } from "@/components/blocks/about/about13"; export default function Page() { return <About13 {...about13Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | none | Heading under the image. |
| story | string | none | Company story paragraph under the heading. |
| image | { src: string; alt: string } | undefined | Image above the heading; renders a placeholder when omitted. |
| details | DetailItem[] | none | Label/value rows in the right-hand fact sheet. |
| className | string | none | Extra classes for the outer section element. |
Types
type DetailItem = { label: string; value: string; };
Behavior notes
- details is rendered as a divided list (divide-y) inside a single bordered card, not individual cards per row, so it reads like a fact sheet rather than a stat grid.
- The right-hand column is height-fit (h-fit) so it does not stretch to match a long story paragraph on the left; a long details list can end up taller than the story column instead.
- The grid track ratio is 1.4:1 in favor of the story column, distinguishing this from About3's roughly even split.
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.