Overlapping Material Collage

Feature252: Overlapping Material Collage

Three photographs arranged as a collage, one overlapping the other on a background-coloured edge, beside a statement, a ruled list of facts and a pill CTA. Built for material, texture and sample-set stories.

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

Base UI flavor

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

This installs the block to components/beste/block/feature252.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Feature252, feature252Demo } from "@/components/beste/block/feature252";

export default function Page() {
  return <Feature252 {...feature252Demo} />;
}

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

import { Feature252 } from "@/components/beste/block/feature252";

export default function Page() {
  return (
    <Feature252
      badge={{ label: "Materials" }}
      heading="Paper, cloth and metal, chosen in that order."
      description="We specify materials before layouts, because the material decides what the layout can do."
      labels={{ collageCaption: "Sample set, autumn" }}
      images={[
        { src: "/materials/cloth.jpg", alt: "Folded fabric bolts" },
        { src: "/materials/matte.jpg", alt: "Textured matte material" },
        { src: "/materials/edge.jpg", alt: "Brushed aluminium edge" },
      ]}
      facts={[
        { title: "Uncoated stocks in rotation", value: "6" },
        { title: "Cloth suppliers, all in Europe", value: "3" },
      ]}
      button={{ label: "Ask for the sample set", href: "/contact" }}
    />
  );
}

Props

type CollageImage = {
  src: string;
  alt: string;
};

type CollageFact = {
  title: string;
  value: string;
};

type ActionButton = {
  label: string;
  href: string;
};

type Feature252Labels = {
  collageCaption?: string;
};

Behavior notes

• images is read by position, not mapped: the first is the tall aspect-[4/5] plate at four fifths width, the second is the square that overlaps it, and the third is the wide aspect-[3/2] strip below. Passing fewer than three simply drops the later layers.
• The overlapping square carries border-4 border-background, so it reads as a separate print laid on top of the first rather than a crop of it, in both light and dark themes.
• Every image is sized in fractions of the column (w-4/5, w-1/2, w-2/3) rather than fixed pixels, so the collage keeps its proportions from a phone to a wide desktop.
• Facts render as a real dl with flex-wrap items-baseline, so a long label and its value stay on the same baseline and wrap onto two lines cleanly instead of colliding.
• The caption sits under the collage as plain muted text with no rule, so it reads as a note on the pictures rather than the first fact.
• The two columns are md:items-center, which keeps the text block optically level with a collage that is taller than it is.
• No hover treatment is applied to any photograph: the collage is content, not a set of controls.