Founders' Letter

About71: Founders' Letter

A long-form company letter set in a wide reading column with an accent-ruled pull quote and signed off by avatar bylines, beside a narrower column of captioned portraits.

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

Base UI flavor

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

This installs the block to components/beste/block/about71.tsx plus the badge23 component it uses for the eyebrow.

Quick start

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

import { About71, about71Demo } from "@/components/beste/block/about71";

export default function AboutPage() {
  return <About71 {...about71Demo} />;
}

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

import { About71 } from "@/components/beste/block/about71";

export default function AboutPage() {
  return (
    <About71
      badge={{ label: "A letter" }}
      heading="Why we built this instead of something easier"
      paragraphs={[
        "In 2020 the two of us spent a fortnight working reception at a practice in Bristol. We were bad at it.",
        "Clinical software is usually bought by one group of people and used by another, and the gap between them is where the frustration lives.",
      ]}
      pullQuote="The gap between who buys clinical software and who uses it is where the frustration lives."
      signatories={[
        {
          name: "Elena Rourke",
          role: "Co-founder",
          avatar: { src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" },
        },
        {
          name: "Priya Nandan",
          role: "Co-founder",
          avatar: { src: "/people/priya.jpg", alt: "Portrait of Priya Nandan" },
        },
      ]}
      portraits={[
        {
          src: "/clinic/corridor.jpg",
          alt: "Two colleagues in a clinic corridor",
          caption: "Bristol, the fortnight that started it",
        },
      ]}
    />
  );
}

Props

type Signatory = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

type Portrait = {
  src: string;
  alt: string;
  caption: string;
};

Behavior notes

• Body paragraphs are plain strings, one per array entry, rendered as separate p elements. There is no markdown or HTML parsing, so links or emphasis inside a paragraph need the block edited rather than passed in.
• Paragraphs use mb-6 with last:mb-0, so the spacing lives between them and the block never ends on a stray margin.
• The reading column is capped at max-w-2xl even though its grid track is wider. That is deliberate: long-form text needs a measure, and the extra track width becomes breathing room rather than longer lines.
• The pull quote is ruled with border-l-2 border-primary, which is the one place the accent appears in this block. It is a p, not a blockquote, since it repeats a line from the letter rather than quoting an outside source.
• The portrait column is pushed down with lg:pt-24 so the first photograph starts level with the body text rather than with the eyebrow.
• Portraits are real figure and figcaption pairs, so the captions stay associated with their images for assistive technology.
• Two hairlines structure the block: one opens the body and one opens the signature row, both on their own containers, so an empty signatories array removes its rule cleanly.