Overlapping Material Collage

A feature split pairing a three-image collage, where a square crop overlaps the tall frame behind a background-coloured edge, with a statement and a ruled key-value list of material facts.

By Staaarter Team

Feature

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/overlapping-material-collage.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature17.tsx instead.

Usage

The file also exports feature17Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature17, feature17Demo } from "@/components/blocks/feature/feature17";

export default function Page() {
  return <Feature17 {...feature17Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small uppercase label above the statement.
statement	string	none	Large statement sentence beside the collage.
description	string	undefined	Supporting paragraph under the statement.
tallPhoto	{ src: string; alt: string }	none	Background tall-frame photo in the collage.
squarePhoto	{ src: string; alt: string }	none	Square-crop photo overlapping the bottom-right of the tall frame.
accentPhoto	{ src: string; alt: string }	none	Small accent photo overlapping the top-left, hidden below sm.
facts	MaterialFact[]	none	Ruled key-value list of material facts.
className	string	none	Extra classes for the outer section element.

Types

type MaterialFact = {
  label: string;
  value: string;
};

Behavior notes

Purely presentational: no client-side state.
The square and accent photos overlap the tall frame using absolute positioning with a border-background border, creating the background-coloured edge described in the brief; the accent photo is hidden on mobile to avoid crowding the collage at narrow widths.
facts renders as a divide-y definition list; any number of entries is supported.

More Feature Blocks

View all →

Full-Bleed Workspace Band

Two-column header above a full-bleed image band with a live view switcher, closing on three numbered captions.

Center-Line Journey Timeline

Vertical hairline timeline alternating stages either side, dropping a phone frame on one step.

Figure-Led Evidence Rows

Tall image with a floating before-and-after card, leading into oversized-figure evidence rows.

Staircase Asset Trio

Three image tiles stepping down the page in a staircase, each floating a different live asset.

Sticky Reference List

Sticky heading column beside three labelled groups of checked capabilities, closing on a footnote.

Day Timeline Rows

Hairline rows walking through one working day, stamped with time and a live approval card inline.