Card Header

Pricing

About

A card header block that pairs an icon, a title with optional accent text, and a price line, used for pricing or product plan cards.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card Header to your project and fits it to your theme.

Code

How Card Header is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CardHeader } from "@/components/ui/card-header";
import { WifiIcon } from "@/components/ui/card-header-utils/wifi-icon";

export default function CardHeaderDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl bg-muted/30 p-8">
      <CardHeader
        icon={<WifiIcon />}
        title="ADSL"
        accentText="broadband"
        price="£9.99/mth"
      />
      <CardHeader
        icon={<WifiIcon />}
        title="SoGEA"
        accentText="broadband"
        price="£24.95/mth"
      />
      <CardHeader
        icon={<WifiIcon />}
        title="Ultrafast fibre"
        price="£26.95/mth"
      />
    </div>
  );
}