Deliverable Cards With Media

Three soft cards, each floating its own media piece over a dotted field before an eyebrow, a title, an explanation, and a ruled delivery note, laid out as a plain grid with no horizontal scrolling.

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/deliverable-cards-with-media.json

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

Usage

The file also exports feature18Demo, 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 { Feature18, feature18Demo } from "@/components/blocks/feature/feature18";

export default function Page() {
  return <Feature18 {...feature18Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	undefined	Section heading above the card grid.
description	string	undefined	Section intro text below the heading.
cards	DeliverableCard[]	none	Cards rendered in a 3-column grid on desktop.
className	string	none	Extra classes for the outer section element.

Types

type DeliverableCard = {
  eyebrow: string;
  title: string;
  description: string;
  deliveryNote: string;
  media?: { src: string; alt: string };
};

Behavior notes

Purely presentational: no client-side state.
The dotted field is a decorative CSS radial-gradient background, not an image; card.media renders through MediaSlot and falls back to its built-in placeholder icon when omitted.
The grid is a plain 1/3-column responsive grid (stacking on mobile), never a horizontal-scroll carousel, per the brief.

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.