Components
Loading preview...
Article Card This card component is designed to showcase an article, event, or location in a visually appealing and structured format. It's fully responsive and uses shadcn/ui theme variables for seamless light/dark mode integration.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-23import { ArticleCard, ArticleCardProps } from "@/components/ui/card-23"; // Adjust the import path
const ArticleCardDemo = () => {
// Data for the card, passed as props for reusability
const cardData: ArticleCardProps = {
tag: "Lush and green",
date: {
month: "JAN",
day: 25,
},
title: "Discovering Peace",
description:
"Far from the city's noise, the green mountains stretch endlessly into the horizon, blanketed with mist and silence.",
imageUrl: "https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=1932&auto=format&fit=crop", // A placeholder image
imageAlt: "A lush green hill with a beautiful contour.",
location: {
city: "Blue Ridge",
country: "Virginia, USA",
},
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<ArticleCard {...cardData} />
</div>
);
};
export default ArticleCardDemo;