Stats + Feature Cards over Media

A full-bleed background photo behind a dark scrim, with a heading and description on top of it, followed by a hero-style row of large stat numbers in one glass panel, and a four-column grid of glass feature cards with icon badges below it.

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/stats-feature-cards-over-media.json

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

Usage

The file also exports feature83Demo, 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 { Feature83, feature83Demo } from "@/components/blocks/feature/feature83";

export default function Page() {
  return <Feature83 {...feature83Demo} />;
}

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.
stats	Feature83Stat[]	none	Large stat numbers rendered in a single glass panel row.
items	Feature83Item[]	none	Feature cards below the stat row, each with an icon, title, and description.
className	string	none	Extra classes for the outer section element.

Types

interface Feature83Stat {
  label: string;
  value: string;
}

interface Feature83Item {
  icon: LucideIcon;
  title: string;
  description: string;
}

Behavior notes

Plain server component, no client-side state.
Stat values are static strings supplied via props, not computed or animated on scroll, they render identically on every pass.
Card icons are real lucide-react components passed by reference, safe here since this is a server component.

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.