Components
Loading preview...
Article Card A responsive card component designed to display articles or blog posts, featuring an image, title, description, and author details. It adapts seamlessly to both light and dark themes.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-8import { ArticleCard } from '@/components/ui/card-8'; // Adjust the import path
const ArticleCardDemo = () => {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<ArticleCard
imageUrl="https://images.unsplash.com/photo-1460472178825-e5240623afd5?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop"
imageAlt="Close-up of code on a screen"
title="Green plants are going to Extinct about 500 times faster than they should, Study finds"
description="If you are the sort of person who just can not keep a plant alive, you are not alone according to a new study published June 10 in the journal Nature..."
authorName="Alexander Parkinson"
authorImageUrl="https://randomuser.me/api/portraits/men/32.jpg"
date="Jun 20, 2019"
onShareClick={() => alert('Share functionality triggered!')}
className="w-full"
/>
</div>
);
};
export default ArticleCardDemo;