Hero Card

A promotional card with headline, ribbon CTA button, and diagonal stripes.

Join The Revolution

Stand with the workers

Unite with fellow comrades in the struggle for a better tomorrow. Together we build, together we rise.

EST. MMXXIV

Installation

pnpm dlx shadcn@latest add https://propcore.dev/r/hero-card.json

Usage

import { HeroCard } from "@/components/ui/hero-card"

<HeroCard
  headline="Join The Revolution"
  subheadline="Stand with the workers"
  description="Unite with fellow comrades in the struggle for a better tomorrow."
  ctaText="Enlist Now"
  accentNumber="01"
  onCtaClick={() => console.log("Clicked")}
/>

Props

Prop	Type	Default	Description
`headline`	`string`	required	Main heading text
`subheadline`	`string`	-	Optional italic subheading
`description`	`string`	required	Body text
`ctaText`	`string`	required	Button label
`accentNumber`	`string`	`"01"`	Number in corner badge
`onCtaClick`	`() => void`	-	Button click handler
`className`	`string`	-	Additional CSS classes

Features

Diagonal red stripe in corner
Gold accent badge with number
Halftone texture overlay for print feel
Ribbon-style CTA button with star icons
Decorative dividers and stripes
Bottom bar and status indicators