Buy Template Now $65→
Skip to main content

Blog Card Component

The Blog Card component is a reusable article preview card designed for blog pages, resource hubs, featured content sections, and marketing grids.

It includes hover animations, image zoom effects, category tags, publication dates, and optional clickable links.

Import the component using:

import BlogCard from "@/components/ui/blogCard";

Preview

Blog Card

Features

  • Responsive image optimization
  • Hover image zoom animation
  • Animated title underline
  • Category tag support
  • Publication date display
  • Optional link wrapper
  • Fully reusable
  • Custom styling support

Basic Usage

<BlogCard
  title="How to Build a SaaS Landing Page"
  tagline="Learn the essential sections every high-converting SaaS landing page needs."
  tag="Marketing"
  publishedDate="May 20, 2026"
  coverImage="/blog/landing-page.jpg"
/>

Complete Example

<BlogCard
  title="How to Build a SaaS Landing Page"
  tagline="Learn the essential sections every high-converting SaaS landing page needs."
  tag="Marketing"
  publishedDate="May 20, 2026"
  coverImage="/blog/landing-page.jpg"
  href="/blog/saas-landing-page"
/>

Data Structure

A typical blog post object may look like this:

{
  title: "How to Build a SaaS Landing Page",
  tagline: "Learn the essential sections every high-converting SaaS landing page needs.",
  tag: "Marketing",
  publishedDate: "May 20, 2026",
  coverImage: "/blog/landing-page.jpg",
  href: "/blog/saas-landing-page"
}

Using Dynamic Data

You can store blog content in a separate file.

export const blogPosts = [
  {
    title: "How to Build a SaaS Landing Page",
    tagline: "Learn the essential sections every high-converting SaaS landing page needs.",
    tag: "Marketing",
    publishedDate: "May 20, 2026",
    coverImage: "/blog/landing-page.jpg",
    href: "/blog/saas-landing-page",
  },
];

Then render them:

{blogPosts.map((post) => (
  <BlogCard
    key={post.href}
    {...post}
  />
))}

Grid Layout Example

The Blog Card works best inside a responsive grid.

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  {blogPosts.map((post) => (
    <BlogCard
      key={post.href}
      {...post}
    />
  ))}
</div>

Props

title

The article title.

title="How to Build a SaaS Landing Page"

tagline

A short article summary.

tagline="Learn the essential sections every high-converting SaaS landing page needs."

tag

Displays the article category.

tag="Marketing"

Examples:

Marketing
Design
Development
Startup
Business
AI

publishedDate

Displays the publication date.

publishedDate="May 20, 2026"

coverImage

The featured article image.

coverImage="/blog/landing-page.jpg"

Images should be stored inside:

public/
└── blog/

href

Optional URL.

When provided, the entire card becomes clickable.

href="/blog/saas-landing-page"

className

Apply custom styling.

<BlogCard
  className="shadow-lg"
  {...post}
/>

Available Props

interface BlogCardProps {
  title: string;
  tagline: string;
  tag: string;
  publishedDate: string;
  coverImage: string;
  href?: string;
  className?: string;
}

Common Use Cases

Blog Listing Page

<BlogCard {...post} />

Featured Articles

<BlogCard {...featuredPost} />

Resource Center

<BlogCard {...resource} />

Marketing Content Grid

<BlogCard {...article} />

Summary

The Blog Card component provides a polished and reusable way to display article previews across your website.

Use it for:

  • Blog pages
  • Resource hubs
  • Learning centers
  • Featured content sections
  • Marketing article grids

Simply provide a title, tagline, category, publication date, and image to get started.

NextblogDetails