Belief Statement Values

About61: Belief Statement Values

Two-column about section: a sticky eyebrow and heading on the left, and a long belief paragraph above a border-separated values list on the right. No image and no CTA.

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

Base UI flavor

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

This installs the block to components/beste/block/about61.tsx, the badge7 component it uses for the eyebrow label, and its dependencies.

Quick start

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

import { About61, about61Demo } from "@/components/beste/block/about61";

export default function Page() {
  return <About61 {...about61Demo} />;
}

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

import { About61 } from "@/components/beste/block/about61";

export default function Page() {
  return (
    <About61
      badge={{ label: "Our belief" }}
      heading="We design like it is <strong>ours to keep.</strong>"
      description="Most studios hand off the files and move on. We treat every project as our own."
      values={[
        { title: "Slow enough to be sure", description: "Pace is a feature, not a constraint." },
        { title: "Opinion before consensus", description: "We bring a clear point of view first." },
        { title: "Details no one asked for", description: "The work people remember is made of small things." },
      ]}
    />
  );
}

Props

type About61Value = { title: string; description: string };

Behavior notes

• The left column (badge + heading) is sticky on desktop (lg:sticky lg:top-24 lg:self-start), so it stays pinned in view while the right column's description and values list scroll past it.
• Values are separated by top borders, with first:border-t-0 first:pt-0 removing the border and padding from the first entry, producing a divided list rather than individual bordered cards.
• There is no numbering, icon, image, or CTA anywhere in this component; entries are plain title/description pairs, which distinguishes it from about55's numbered Four Parts pattern.
• Below lg, the two columns stack in document order (badge/heading first, then description and values) with no sticky behavior.