Blog Post Card

Cards 437

About

Blog Post Card

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

Code

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

Usage.tsx

import { ArticleCard } from "@/components/ui/blog-post-card";

export default function DemoOne() {
  return (
    <div className="flex w-full justify-center p-6 bg-background">
      <ArticleCard
        headline="Shaping Tomorrow: AI & The Web"
        excerpt="From automated coding assistants to intelligent design workflows, AI is redefining how developers build and ship modern applications."
        cover="https://cdn.21st.dev/assets/mirror/98/982cd94447d85ed7e478c4f6430ef2a16839da94f99b101869d33d5f7521f630.png"
        tag="Innovation"
        readingTime={420}
        writer="John Doe"
        publishedAt={new Date("2025-09-01")}
      />
    </div>
  );
}