Media Card Showcase CTA

Portfolio-style showcase section: a centered heading, supporting copy, and two buttons sit above a row of three media cards. Each card carries a dark gradient overlay and a project label that fades and slides into view on hover, keeping the grid clean until the visitor engages with it.

By Staaarter Team

CTA

Docs

Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/media-card-showcase-cta.json

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

Usage

The file also exports cta56Demo, 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 { Cta56, cta56Demo } from "@/components/blocks/cta/cta56";

export default function Page() {
  return <Cta56 {...cta56Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Work worth showing off"	Centered heading above the card grid.
description	string	"A handful of projects our customers built with us, from first sketch to shipped product."	Supporting copy under the heading.
primaryLabel	string	"View the full showcase"	Label for the primary button.
primaryHref	string	"#"	Link target for the primary button.
secondaryLabel	string	"Start your project"	Label for the secondary button.
secondaryHref	string	"#"	Link target for the secondary button.
cards	ShowcaseCard[]	none	Media cards shown in the row, each with an eyebrow and label.
className	string	none	Extra classes for the outer section element.

Types

interface ShowcaseCard {
  image: MediaSlotImage;
  eyebrow: string;
  label: string;
}

Behavior notes

Each card's label overlay is hidden by default (`opacity-0`) and fades in on `group-hover:opacity-100`; the photo itself gets a subtle `group-hover:scale-105` zoom at the same time, both pure CSS transitions scoped per card via `group`.
Only photos are used for every card in this block (no video), to keep the showcase interaction the focus.
Both buttons above the grid are inert links (`render={<Link/>}`) pointing at `#` by default; there is no real navigation wired up.

More CTA Blocks

View all →

centered-newsletter-cta

Centered Newsletter CTA

Minimal centered call-to-action with heading, description, and action buttons.

split-layout-newsletter-cta

Split Layout Newsletter CTA

Two-column call-to-action with a decorative image on one side and a feature list plus subscribe form on the other.

newsletter-social-proof-cta

Newsletter CTA with Social Proof

Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.

banner-cta

Banner CTA

Horizontal banner call-to-action with heading and action buttons side by side.

stats-cta

Stats CTA

Call-to-action section with impressive statistics and trust indicators above action buttons.

multi-card-cta

Multi-Card CTA

Three action cards side by side, each offering a different path to conversion.