Centered Manifesto

About65: Centered Manifesto

Centered manifesto section built around a very large, multi-line statement heading with muted emphasis phrases, a closing description line, a single CTA, and a small signoff line underneath. No image, no stats, just typography carrying the whole section.

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

Base UI flavor

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

This installs the block to components/beste/block/about65.tsx, the badge7 component it uses for the eyebrow badge, the button12 component it uses for the CTA pill, and its dependencies.

Quick start

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

import { About65, about65Demo } from "@/components/beste/block/about65";

export default function AboutPage() {
  return <About65 {...about65Demo} />;
}

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

import { About65 } from "@/components/beste/block/about65";

export default function AboutPage() {
  return (
    <About65
      labels={{ signoff: "The studio, est. 2016" }}
      badge={{ label: "Manifesto" }}
      heading="We would rather make <strong>one thing that lasts</strong> than <strong>ten that do not</strong>."
      description="Restraint is the whole craft. We say no to the extra screen and the color added only to fill a gap."
      button={{ label: "Read how we work", href: "https://beste.co" }}
    />
  );
}

Props

type About65Labels = { signoff?: string };
type Badge = { label: string };
type ActionButton = { label: string; href: string };

Behavior notes

• Every element (badge, heading, description, button, signoff) is centered in a single max-w-4xl column; there is no two-column or split variant.
• The heading scales up to text-7xl at lg with a tight leading-[1.05], and unlike other About blocks in this set the demo uses two separate <strong> spans in one heading to emphasize two different phrases.
• labels.signoff renders last, below the button, as a small muted line rather than as an author credit.
• The CTA is Button12: hovering it slides the label text out the bottom while a duplicate slides in from the top, and the trailing seal icon animates the same way.
• There is no image or media slot in this component; it is intentionally text-only.