Company Profile

About13: Company Profile

Asymmetric company-profile section: a wide left column carries a cover image, a long-form story paragraph, and CTA buttons, while a narrower right column stacks a vertical list of company facts as label/value pairs separated by hairline borders. Built for press kits and investor-facing pages that need a story alongside quick reference data.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/about13?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/about13?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/about13.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

The installed file exports about13Demo alongside the block: the exact props behind the preview above. Spread it to get a working profile section in one line.

import { About13, about13Demo } from "@/components/beste/block/about13";

export default function Page() {
  return <About13 {...about13Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { About13 } from "@/components/beste/block/about13";

export default function Page() {
  return (
    <About13
      badge={{ label: "Company Profile", variant: "secondary" }}
      heading="Building the tools developers reach for first"
      description="A small team shipping production-ready UI for the modern web."
      story="Founded in 2020, we set out to close the gap between design files and shipped code. Today our components power thousands of products."
      image={{ src: "https://images.unsplash.com/photo-1593343413821-bc3274a5c5f5?w=1200&h=675&fit=crop", alt: "Company headquarters" }}
      details={[
        { label: "Headquarters", value: "Austin, TX" },
        { label: "Founded", value: "2020" },
        { label: "Team Size", value: "22 people" },
        { label: "Funding", value: "Seed" },
      ]}
      buttons={[{ label: "Contact Us", href: "https://beste.co" }]}
    />
  );
}

Props

type DetailItem = { label: string; value: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• The layout is a 5-column grid on lg screens: the image/story/buttons column spans 3 tracks, the details list spans 2, so the split is intentionally asymmetric rather than an even 50/50.
• The badge/heading/description header block is left-aligned and capped at max-w-3xl, unlike sibling About blocks that center this header.
• Each details row renders as a stacked label above a bold value, separated by a bottom border; the last row drops its border and padding (last:border-b-0 last:pb-0) so the list doesn't end on a visible rule.
• The cover image is a fixed aspect-video box; there is no separate treatment for portrait images.