Inset Card About

About54: Inset Card About

About section built around a full-bleed cinematic image with a content card overlapping its bottom edge, offset to the left rather than centered, followed by a full-width stat ribbon below.

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

Base UI flavor

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

This installs the block to components/beste/block/about54.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 about54Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { About54, about54Demo } from "@/components/beste/block/about54";

export default function Page() {
  return <About54 {...about54Demo} />;
}

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

import { About54 } from "@/components/beste/block/about54";

export default function Page() {
  return (
    <About54
      label="Inside The Studio"
      heading="We build brands that<br /><strong>refuse to disappear.</strong>"
      description="Polaris is a creative studio of directors, designers, and strategists."
      button={{ label: "Step into the studio", href: "/studio" }}
      image={{
        src: "https://images.unsplash.com/photo-1547931751-eb4f7f5c049b?w=2000&fit=crop",
        alt: "Studio floor with the team mid-production",
      }}
      stats={[
        { value: "14yrs", label: "Crafting brands that last." },
        { value: "320+", label: "Films shipped worldwide." },
        { value: "41", label: "Makers under one roof." },
        { value: "9", label: "Awards on the shelf." },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };
type ImageItem = { src: string; alt: string };
type StatItem = { value: string; label: string };

Behavior notes

• The heading supports raw inline HTML via dangerouslySetInnerHTML, which is why the demo uses a literal <br /> to force a line break in addition to <strong> for the accent color.
• The content card overlaps the image using a negative top margin (-mt-24 md:-mt-32) and is deliberately offset toward the left (md:ml-4 lg:ml-8) rather than centered under the image.
• A bg-gradient-to-tr scrim darkens the image from its bottom-left corner toward transparent at the top-right, weighted to sit behind where the card lands for legibility.
• The image scales up slightly on hover of the whole media block (group-hover/about54:scale-105, 700ms transition).
• The stat ribbon is a grid-cols-2 md:grid-cols-4 row with vertical dividers between columns (md:border-r, dropped on the first and last column) rather than individual bordered cards.