Card Content

Cards

About

A padded content region for the main body of a card, meant to sit between a card's header and footer sections. Ported to React from the RockSolid SolidJS component library by Darshan Rajadhyaksha (rocksolidjs.com).

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

Code

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

Usage.tsx

import CardContent from "@/components/ui/card-content";

export default function CardContentDemo() {
  return (
    <div className="w-full max-w-sm rounded-sm border overflow-hidden border-neutral-300 dark:border-neutral-700 bg-transparent">
      <div className="px-4 pt-4 pb-2">
        <h3 className="text-lg font-semibold tracking-normal leading-normal text-neutral-900 dark:text-neutral-50">
          Project overview
        </h3>
        <p className="pt-1 text-sm font-normal leading-normal tracking-normal text-neutral-600 dark:text-neutral-300">
          Track your project progress.
        </p>
      </div>
      <CardContent>
        Your project is currently on track and all milestones are progressing as
        expected.
      </CardContent>
      <div className="flex items-center gap-2 px-4 pt-3 pb-4">
        <button className="inline-flex items-center justify-center gap-2 rounded-sm bg-neutral-900 px-3 py-1 text-sm font-normal text-white hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200">
          View project
        </button>
      </div>
    </div>
  );
}