Card

Cards 45

About

Property Card A modern, responsive card component designed to showcase property listings with key details and a call-to-action.

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

Code

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

Usage.tsx

import { PropertyCard } from "@/components/ui/card-4";

export default function PropertyCardDemo() {
  const handleReserveClick = () => {
    // In a real app, this would handle the reservation logic
    alert("Reserve button clicked!");
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <PropertyCard
        imageUrl="https://cdn.21st.dev/assets/mirror/e2/e29a400771a8ddd70d0986c9ce88aedebd3aa98ade01efe83ec5dd01bad224ef.jpg"
        imageAlt="Modern wooden cabin in a grassy, mountainous landscape"
        title="Iceland Cabin"
        price={680}
        pricePeriod="per night"
        description="Cozy cabin nestled in Iceland's breathtaking landscape, offering stunning views of mountains and Northern Lights."
        stats={[
          { label: "Days", value: 3 },
          { label: "Rating", value: "4.9" },
        ]}
        actionLabel="Reserve"
        onActionClick={handleReserveClick}
      />
    </div>
  );
}