ArticleCard NEW

Article/blog card with image preview, hover lift effect, and CTA link.

Preview/Playground

Created by

Prashanth

UI Animation Patterns

Interaction ideas for modern interfaces.

Find out more

Building Scalable Design Systems with Astro

Learn how to create reusable, accessible, and performance-first UI components in Astro using modern CSS architecture, component composition, and scalable design patterns for production-ready applications.

Find out more

Astro

---
import ArticleCard from "@astroanimate/core/ArticleCard";
---

<ArticleCard
  title="UI Animation Patterns"
  description="Interaction ideas for modern interfaces."
  image="/images/article-cover.jpg"
  href="/blog/ui-animation"
/>

<ArticleCard
  title="Building Scalable Design Systems with Astro"
  description="Learn how to create reusable, accessible, and performance-first UI components in Astro."
  href="/blog/design-systems"
/>

Installation

bash

npm install @astroanimate/core

Usage

---
import ArticleCard from "@astroanimate/core/ArticleCard";
---

<ArticleCard />

Renders the ArticleCard component with AstroAnimate defaults.

Props

Prop	Type	Default	Description
`title`	`string`	`-`	Article title
`description`	`string`	`-`	Article description
`href`	`string`	`"#"`	Article link
`image`	`string`	`-`	Article image URL
`actionLabel`	`string`	`"Find out more"`	CTA text
`class`	`string`	`""`	Additional CSS classes