Four Parts About

About55: Four Parts About

Type-led about section with no imagery: an oversized statement heading sits above a four-part Who/What/How/Why style grid, each entry auto-numbered from its position in the array, closing with an optional signature and CTA row.

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

Base UI flavor

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

This installs the block to components/beste/block/about55.tsx, the badge6 component it uses for the eyebrow label, the button1 component it uses for the CTA, and its dependencies.

Quick start

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

import { About55, about55Demo } from "@/components/beste/block/about55";

export default function Page() {
  return <About55 {...about55Demo} />;
}

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

import { About55 } from "@/components/beste/block/about55";

export default function Page() {
  return (
    <About55
      label="About Polaris"
      heading="We are a creative studio that builds <strong>brands worth believing in.</strong>"
      parts={[
        { label: "Who", body: "A tight crew of designers, writers, and engineers." },
        { label: "What", body: "Identity systems, editorial sites, and product interfaces." },
        { label: "How", body: "Small teams, short loops, real prototypes." },
        { label: "Why", body: "Because most brands sound the same." },
      ]}
      signature={{ name: "Mara Quill", role: "Founder & Creative Director" }}
      button={{ label: "Start a Project", href: "/contact" }}
    />
  );
}

Props

type PartItem = { label: string; body: string };
type Signature = { name: string; role: string };
type ActionLink = { label: string; href: string };

Behavior notes

• Each parts entry's number (01, 02, 03, 04) is generated from its array index (String(index + 1).padStart(2, "0")), not a prop; reordering the array reorders the numbers automatically.
• Both the section heading and each part's body render through dangerouslySetInnerHTML, so both accept inline HTML: the demo uses <strong> in the heading and HTML entities (—) in a couple of body strings.
• The grid is fixed at md:grid-cols-4 and does not adapt column count to parts.length; passing fewer or more than four entries changes row wrapping rather than column width.
• The footer row (signature and button) only renders its wrapper when at least one of the two is present, and each half renders independently if the other is omitted.
• There is no image or media slot anywhere in this component; it is a purely typographic layout.