Organic Card Small

Cards 39

About

A compact article/preview card with an animated organic SVG silhouette footer that morphs on hover or focus, showing an image, category, date, and title with a "Read more" link.

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

Code

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

Usage.tsx

"use client";

import { OrganicCardSmall } from "@/components/ui/organic-card-small";

export default function OrganicCardSmallDemo() {
  return (
    <div>
      <div className="mx-auto max-w-3xl px-4 sm:px-0">
        <OrganicCardSmall
          category="Engineering"
          date="Apr 2, 2026"
          href="#"
          image="https://cdn.21st.dev/assets/mirror/ed/edf3668cd068a08cd0065d6a941d70c6847ca7c509ecdd9cb43079a3d730e7e5.jpg"
          imageAlt="AI neural network visualization"
          title="Building scalable AI infrastructure for enterprise"
        />
      </div>
    </div>
  );
}