Numbered Editorial Cards over Media

A full-bleed background photo behind a dark scrim, a heading and description on top of it, and a staggered three-column grid of glass-morphism cards below, alternating a small vertical offset by position. Each card shows a large, faint oversized index number in the corner behind a smaller solid number, title, and description, in an editorial numbered-list style.

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/numbered-editorial-cards-over-media.json

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

Usage

The file also exports feature81Demo, 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 { Feature81, feature81Demo } from "@/components/blocks/feature/feature81";

export default function Page() {
  return <Feature81 {...feature81Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading.
heading	string	none	Section heading, rendered directly over the background photo.
description	string	undefined	Supporting copy under the heading.
image	MediaSlotImage	none	Full-bleed background photo behind the whole section.
items	Feature81Item[]	none	Numbered cards, rendered in array order; the index number is derived from array position.
className	string	none	Extra classes for the outer section element.

Types

interface Feature81Item {
  title: string;
  description: string;
}

Behavior notes

Plain server component, no client-side state.
The staggered vertical offset per card cycles through a fixed array of Tailwind classes keyed by array index, not a random value, so the layout is identical on every render including static export and card thumbnails.
Card numbers are derived from array position (index + 1), not stored per item, so reordering the items array changes the displayed numbers.

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.