BlogCard Component
BlogCard Component
A comprehensive blog post showcase molecule that displays blog post information including image, title, excerpt, tags, and metadata.
Live Example
Building Modern Web Applications with Astro
Discover how Astro's island architecture and partial hydration can dramatically improve your web application's performance while maintaining developer experience.
Featured Building Modern Web Applications with Astro
Discover how Astro's island architecture...
Astro Web Development Performance +1 Component Structure
The BlogCard is a molecule component that combines several UI atoms to create a comprehensive blog post preview:
Used Atoms
-
Card- Main container -
Button- Read more button -
Badge- Featured indicator -
Pill- Tag display
Features
- Blog post image with lazy loading
- Tag system for categorization
- Publication date and read time
- Featured post highlighting
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | Yes | - | Blog post title |
| excerpt | string | Yes | - | Blog post excerpt/summary |
| slug | string | Yes | - | URL slug for the blog post |
| image | string | No | '/images/blog/default.jpg' | Blog post featured image |
| tags | string[] | No | [] | Array of blog post tags |
| date | string | No | undefined | Publication date (YYYY-MM-DD) |
| readTime | string | No | undefined | Estimated reading time |
| featured | boolean | No | false | Whether post is featured |
| class | string | No | '' | Additional CSS classes |
Visual Examples
Featured Blog Post
Posts marked as featured display a special badge and enhanced styling.
The Future of Web Development: Trends to Watch in 2024
Explore the latest trends shaping web development, from AI integration to new frameworks and tools that are revolutionizing how we build for the web.
The Future of Web Development: Trends to Watch in 2024
Explore the latest trends shaping web development...
Web Development Trends AI +1 Standard Blog Post
Regular blog post card with all metadata.
CSS Grid vs Flexbox: When to Use Which
A comprehensive guide to understanding the differences between CSS Grid and Flexbox, with practical examples and use cases for each layout method.
CSS Grid vs Flexbox: When to Use Which
A comprehensive guide to understanding...
CSS Layout Frontend Minimal Blog Post
Blog post with minimal metadata (title, excerpt, and slug only).
Quick Tips for Better Code Reviews
Simple strategies to make your code reviews more effective and collaborative.
Layout Structure
Card Layout
The BlogCard follows a structured layout pattern:
- • Featured image (aspect ratio 16:9)
- • Featured badge (if applicable)
- • Blog post title
- • Excerpt/summary
- • Tags (pills)
- • Publication date
- • Reading time estimate
- • Read more button
Responsive Behavior
- • Image maintains aspect ratio across screen sizes
- • Tags wrap to new lines as needed
- • Metadata stacks vertically on small screens
- • Card width adapts to container
- • Touch-friendly button sizes on mobile
Tag System
Tag Display
Tags are displayed as non-interactive pills that help categorize content:
tags=ReactTutorialJavaScriptBest PracticesTag Best Practices
- • Limit to 3-5 tags per post for clarity
- • Use consistent tag naming conventions
- • Include both technical and topical tags
- • Consider tag hierarchy (broad to specific)
- • Make tags searchable and filterable
Common Tag Categories
Technical Tags
- • Programming languages (JavaScript, Python)
- • Frameworks (React, Vue, Astro)
- • Tools (Git, Docker, VS Code)
- • Concepts (API, Database, Security)
Content Tags
- • Content type (Tutorial, Guide, Tips)
- • Difficulty (Beginner, Intermediate, Advanced)
- • Topics (Performance, Accessibility, UX)
- • Industry (Web Dev, Mobile, DevOps)
Metadata Display
Date Formatting
Publication dates are automatically formatted for readability:
date="2024-01-15" // Input format
readTime="8 min read" // Display formatReading Time Calculation
Reading time estimates help users gauge content length:
- • Based on average reading speed (200-250 words/minute)
- • Accounts for code blocks and images
- • Rounded to nearest minute
- • Includes "min read" suffix for clarity
Featured Badge
Badge Display
Featured posts display a special badge in the top-right corner:
Featured Blog Post
This post is highlighted as featured content
When to Use Featured
- • Your best or most popular posts
- • Recent posts you want to highlight
- • Posts with significant engagement
- • Comprehensive guides or tutorials
- • Limit to 2-3 featured posts for impact
Navigation Integration
Slug-Based Routing
The component uses the slug prop to generate navigation links:
// Slug: "building-modern-web-apps-with-astro"
// Generated URL: /blog/building-modern-web-apps-with-astro
<BlogCard
slug="building-modern-web-apps-with-astro"
// ... other props
/>URL Structure
- • Base path:
/blog/ - • Slug format: lowercase, hyphen-separated
- • SEO-friendly URLs
- • Consistent with Astro routing conventions
Usage Examples
Minimal Blog Post
Getting Started with TypeScript
Learn the basics of TypeScript and how it can improve your JavaScript development.
Complete Blog Post
Featured Advanced React Patterns: Compound Components
Explore compound components pattern in React for building flexible and reusable UI components.
React Patterns Advanced +1 In a Grid Layout
Featured Posts Section
Featured Posts
Featured Featured Post Example
This is an example of a featured blog post with enhanced styling.
Featured Example
Dependencies
This molecule component depends on the following atoms:
Required Atoms
- •
Card.astro- Main container - •
Button.astro- Read more button - •
Badge.astro- Featured indicator - •
Pill.astro- Tag display
External Dependencies
- • Blog post images
- • Astro routing system
- • Date formatting utilities
Import
import BlogCard from '../ui/molecules/BlogCard.astro';