Card Grid

Cards 91

About

Article Card Grid This component displays a title and a responsive grid of article cards. It's designed to be easily populated with data via props, making it highly reusable for different sections of your application, such as blog post listings, feature showcases, or resource centers.

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

Code

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

Usage.tsx

import React from 'react';
import { ArticleCardGrid } from '@/components/ui/card-grid'; // Adjust the import path as needed

const ArticleCardGridDemo = () => {
  // Sample data for the article cards
  const articles = [
    {
      id: 1,
      imageSrc: 'https://cdn.21st.dev/assets/mirror/01/018551b29fd418d21297adfd4bce7264094e0a8c035b1410b559e2ca43c47dac.jpg',
      title: 'How to reduce the carbon footprint of business travel',
      linkText: 'See how',
      linkHref: '#',
    },
    {
      id: 2,
      imageSrc: 'https://cdn.21st.dev/assets/mirror/d8/d853679affe99c59ca7a6c562d4dc04c48cf114813272787171e5e5b1324b8ad.jpg',
      title: 'The perks and benefits your employees want now',
      linkText: 'Find out',
      linkHref: '#',
    },
    {
      id: 3,
      imageSrc: 'https://cdn.21st.dev/assets/mirror/dd/dd9ff83a61f8fc04c30f637608c7d1ab827e8893815894fcdbac74a44888b625.jpg',
      title: 'The road to sustainability: executives discuss their efforts toward net zero',
      linkText: 'Keep reading',
      linkHref: '#',
    },
  ];

  return (
    <div className="flex items-center justify-center w-full bg-background">
      <ArticleCardGrid title="Interested in learning more?" articles={articles} />
    </div>
  );
};

export default ArticleCardGridDemo;