Resource Grid

Features

About

Resource Grid A responsive grid component designed to display a collection of resources, such as articles, guides, or case studies. Each item in the grid is presented as a card with an image, title, description, and a call-to-action link. The component features subtle hover animations to enhance user interaction and is fully theme-adaptive using shadcn/ui CSS variables.

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

Code

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

Usage.tsx

import { ResourceGrid, Resource } from "@/components/ui/resource-grid"; // Adjust path as needed

// Sample data for the demo
const resourcesData: Resource[] = [
  {
    imageSrc: "https://cdn.21st.dev/assets/mirror/d9/d9e1ca792d565a030b0a060d495dfb00df76ada83a59addbf4060529b47869c5.jpg",
    title: "Simplify team meals with group orders",
    description: "See how group orders with Uber Eats help bring camaraderie back to the table—whether in the office or at home.",
    linkText: "Read the post",
    linkHref: "#",
  },
  {
    imageSrc: "https://cdn.21st.dev/assets/mirror/37/376b2c0e088cd01068241c586198de20bb656e0108ff96d3e9c3691eae80fef7.jpg",
    title: "Retain top talent with meal programs",
    description: "Discover how meal programs can help revitalize employees and increase engagement, one meal at a time.",
    linkText: "Learn more",
    linkHref: "#",
  },
  {
    imageSrc: "https://cdn.21st.dev/assets/mirror/60/6003a8062a0ea3d92fcd007989baac580efb333cbf7fcd9f607a78c538099bad.jpg",
    title: "Stand out with One membership",
    description: "Read about how an Uber One membership gives your business and employees savings and members-only perks.",
    linkText: "View our guide",
    linkHref: "#",
  },
];

// Demo component to showcase the ResourceGrid
export default function ResourceGridDemo() {
  return (
    <div className="bg-background">
      <ResourceGrid 
        title="Explore more resources" 
        resources={resourcesData} 
      />
    </div>
  );
}