Open Company Facts

About72: Open Company Facts

An about section on a soft surface that opens on a light statement, then lays out eight company facts as a two-column hairline definition list beside an image tile floating a live locations card.

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/about72?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/about72.tsx, the location8 coverage piece it floats on the tile (installed to components/beste/piece/location8.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { About72, about72Demo } from "@/components/beste/block/about72";

export default function AboutPage() {
  return <About72 {...about72Demo} />;
}

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

import { About72 } from "@/components/beste/block/about72";
import { Location8 } from "@/components/beste/piece/location8";

export default function AboutPage() {
  return (
    <About72
      badge={{ label: "The open version" }}
      statement="We would rather you knew the awkward numbers before you asked for them"
      description="Company facts that most vendors make you dig for, current as of this month."
      factsLabel="As of May 2026"
      facts={[
        { label: "Founded", value: "March 2020, in Bristol" },
        { label: "People", value: "18, of whom 9 write code" },
        { label: "Sales team", value: "None, deliberately" },
        { label: "Longest outage", value: "41 minutes, 14 Feb 2025" },
      ]}
      media={
        <Location8
          title="Where we work from"
          region="Europe"
          sites={[
            { name: "Bristol", meta: "Registered office", value: "9 people" },
            { name: "Dublin", meta: "Support and migration", value: "5 people" },
          ]}
          total="18"
          totalLabel="people, no offices we do not use"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      button={{ label: "Read the full company update", href: "/blog/company-update" }}
      footnote="If a figure here turns out to be stale, tell us and we will correct it."
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

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

Behavior notes

• The facts are a real dl with dt and dd per entry, which is the right structure for label and value pairs and reads correctly to assistive technology.
• The list is a two-column grid from sm, filling column by column, so an odd number of facts leaves the gap at the bottom of the second column rather than mid-list.
• Every fact carries its own border-t with no closing rule, so the list stays open at the bottom and flows into the action below it.
• factsLabel exists because the block is built for figures that go stale. Pairing the list with an explicit as-of date is the convention, and footnote is where the correction policy goes.
• The section is bg-muted and the tile is bg-background, so the tile reads as raised against the section rather than recessed into it.
• The action group is items-start, so Button21 keeps its intrinsic width with the footnote underneath at the same left edge.
• The layout is a 1.4fr to 1fr split, giving the two-column list the wider track, with the tile sized to what the locations card actually needs.