Card

Cards 83

About

Latest News Card A card component designed to display a list of recent articles or news items. It features a main title, a "View all" link, and a list of animated news entries that fade in on load. Each item is clickable and has a subtle hover effect.

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 React from 'react';
import { LatestNewsCard, NewsItem } from '@/components/ui/card-11';

// --- MOCK DATA ---
// Sample data to showcase the component's functionality.
const sampleNewsItems: NewsItem[] = [
  {
    id: 1,
    imageUrl: 'https://cdn.21st.dev/assets/mirror/c7/c7cacb62ea907685b1f7813c3dc0244f53caa1e4dc63943975f4300b56cc6138.jpg',
    title: 'Bank Indonesia Maintains Interest Rates at 3.5%',
    date: 'June 10, 2024',
    source: 'CNN Indonesia',
    href: '#',
  },
  {
    id: 2,
    imageUrl: 'https://cdn.21st.dev/assets/mirror/bb/bbbe98c1d61e68e468d3a6dc4610a2633828d75236ae72f2d6c685d67626b9f6.jpg',
    title: 'Global Oil Prices Drop: Impacts on Mining Stocks',
    date: 'June 9, 2024',
    source: 'Kontan',
    href: '#',
  },
  {
    id: 3,
    imageUrl: 'https://cdn.21st.dev/assets/mirror/47/475bbba31695e229e159e5dd12c54c74960f5db4f19b63ad54c41bdc44ce8158.jpg',
    title: 'IDX Rises 2% After First Quarter Earnings Reports',
    date: 'June 8, 2024',
    source: 'CNBC Indonesia',
    href: '#',
  },
];

/**
 * A demo page to display the LatestNewsCard component.
 */
const LatestNewsCardDemo = () => {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <LatestNewsCard
        title="Latest News"
        viewAllText="View all"
        viewAllHref="#"
        newsItems={sampleNewsItems}
      />
    </div>
  );
};

export default LatestNewsCardDemo;