Common Components

Blog Card

Card component for displaying blog post previews

Quick Preview

🚀

Tutorial

Getting Started with Next.js 14

Learn how to build modern web applications with Next.js 14, featuring App Router, Server Components, and more.

15/05/2024

Installation

// Copy the BlogCard component from
src/components/common/BlogCard.tsx

// Install dependencies
npm install lucide-react

Usage

import { BlogCard } from '@/components/common/BlogCard'

const post = {
  slug: 'getting-started',
  title: 'Getting Started with Next.js',
  excerpt: 'Learn how to build modern web applications...',
  category: 'Tutorial',
  date: 'May 15, 2024',
  emoji: '🚀'
}

export default function BlogList() {
  return <BlogCard {...post} />
}

Examples

Grid Layout

Multiple blog cards in a responsive grid

🚀

Tutorial

Getting Started with Next.js 14

Learn how to build modern web applications with Next.js 14, featuring App Router, Server Components, and more.

15/05/2024

🎨

Tutorial

Building a Design System

Learn how to build modern web applications with Next.js 14, featuring App Router, Server Components, and more.

15/05/2024

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a common component named Blog Card in React/Next.js.
Goal: recreate the same overall UI and behavior as the Blog Card reference from a component gallery.
What it needs to communicate: Card component for displaying blog post previews.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Design the component so it can be dropped into landing and application pages without refactoring.
- Preserve clear content hierarchy and comfortable spacing.
- Existing documented dependencies: lucide-react, next/link
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- slug: string — required — URL slug for the blog post
- title: string — required — Blog post title
- excerpt: string — required — Short preview text
- category: string — required — Post category
- date: string — required — Publication date
- emoji: string — required — Emoji icon for the post

Reference usage patterns:
- Blog Card

```tsx
<BlogCard
  slug="getting-started"
  title="Getting Started with Next.js"
  excerpt="Learn how to build modern web applications..."
  category="Tutorial"
  date="May 15, 2024"
  emoji="🚀"
/>
```

Feature expectations:
- Clickable card with hover effects
- Emoji thumbnail area
- Category badge
- Date display with icon
- Text truncation (2-line title, 3-line excerpt)
- Smooth transitions

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`slug`*	`string`	-	URL slug for the blog post
`title`*	`string`	-	Blog post title
`excerpt`*	`string`	-	Short preview text
`category`*	`string`	-	Post category
`date`*	`string`	-	Publication date
`emoji`*	`string`	-	Emoji icon for the post

Features

✓Clickable card with hover effects
✓Emoji thumbnail area
✓Category badge
✓Date display with icon
✓Text truncation (2-line title, 3-line excerpt)
✓Smooth transitions

← Back to Common Components