Beliefs About

About51: Beliefs About

An asymmetric header (a two-thirds-width statement heading beside a CTA) sits above a full-width list of belief statements, each numbered and some paired with a small square thumbnail that appears only intermittently, giving the list an uneven, editorial rhythm rather than a uniform grid.

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

Base UI flavor

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

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

Quick start

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

import { About51, about51Demo } from "@/components/beste/block/about51";

export default function AboutPage() {
  return <About51 {...about51Demo} />;
}

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

import { About51 } from "@/components/beste/block/about51";

export default function AboutPage() {
  return (
    <About51
      label="What we hold"
      heading="A team built on a short list of <strong>stubborn convictions</strong>."
      button={{ label: "Work with us", href: "https://beste.co" }}
      beliefs={[
        {
          statement: "A product earns attention before it ever asks for it.",
          image: {
            src: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=480&h=480&fit=crop",
            alt: "Bold poster pinned to a studio wall",
          },
        },
        {
          statement: "Constraints are a gift, not a compromise to be negotiated.",
          note: "Every tight brief we shipped became the sharper version of itself.",
        },
        {
          statement: "We would rather be unmistakable than agreeable.",
          image: {
            src: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=480&h=480&fit=crop",
            alt: "Team reviewing layouts together",
          },
        },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };
type BeliefImage = { src: string; alt: string };
type BeliefItem = { statement: string; note?: string; image?: BeliefImage };

Behavior notes

• The header is a md:flex-row md:items-end md:justify-between row with the heading capped at md:w-2/3, so the button never competes with the heading's line length; below md it stacks with the heading first.
• Every belief row is zero-padded (01, 02, ...) at low-opacity muted-foreground color, always shown regardless of whether the row has an image.
• The image field on BeliefItem is optional per row, and rows without one simply omit the thumbnail column's content rather than leaving a visible empty box, so belief rows visually alternate between text-only and text-with-thumbnail depending on the data (the demo shows this pattern with only 3 of its 5 beliefs carrying an image).
• The row grid changes template between breakpoints: grid-cols-[auto_1fr] on mobile puts an image (if present) directly under the statement text, while md:grid-cols-[auto_1fr_auto] moves the thumbnail into its own trailing column beside the text.
• An optional note renders as a smaller, regular-weight line directly under the statement inside the same paragraph, not as a separate element.