Article Card
A glassmorphic blog/article card with image, tags, author info, and hover effects.
npx arupui add article-card
Preview
DesignUI/UX
The Future of UI Design
Exploring the latest trends in glassmorphism, 3D elements, and micro-interactions.
Arup BDec 2, 2025
Usage
article-card.tsx
import { ArticleCard } from "@/components/blocks/article-card"
<ArticleCard
title="My Post"
excerpt="A short description."
image="/blog/cover.jpg"
author={{ name: "Jane", avatar: "/avatars/jane.png" }}
date="Mar 15, 2026"
readTime="4 min read"
tags={["React", "Design"]}
href="/blog/my-post"
/>Props
| Prop | Type | Default |
|---|---|---|
title | string | "The Future of UI Design" |
excerpt | string | - |
image | string | - |
author | { name: string; avatar: string } | - |
date | string | - |
readTime | string | - |
tags | string[] | ["Design", "UI/UX"] |
href | string | undefined |
action | ReactNode | undefined |
titleType:
stringDefault: "The Future of UI Design"excerptType:
stringDefault: -imageType:
stringDefault: -authorType:
{ name: string; avatar: string }Default: -dateType:
stringDefault: -readTimeType:
stringDefault: -tagsType:
string[]Default: ["Design", "UI/UX"]hrefType:
stringDefault: undefinedactionType:
ReactNodeDefault: undefined