Blog Card

A blog post preview card with featured image, title, excerpt, author info, date, and category tags.

Preview

10 Things to Do in Manali

Discover the best activities, treks, and hidden gems in this Himalayan paradise.

Zostel Team·Feb 2026

Travel

Mountains

Backpacking Goa on a Budget

Your ultimate guide to exploring Goa without breaking the bank.

Priya S.·Jan 2026

Budget

Beach

Usage

tsx

import { BlogCard } from "zostel-ui";

<BlogCard
  title="Top 10 Backpacking Destinations"
  excerpt="From the misty mountains of Himachal to..."
  image="/images/blog/backpacking.jpg"
  author={{ name: "Zostel Team", avatar: "/avatars/zt.jpg" }}
  date="Jan 15, 2025"
  tags={["Backpacking", "Budget Travel", "India"]}
  readTime="5 min"
  category="Travel Guide"
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Blog post title
`excerpt`	`string`	—	Short excerpt or summary text
`image`	`string`	—	Featured image URL
`author`	`{ name: string; avatar?: string }`	—	Author information
`date`	`string`	—	Publication date
`tags`	`string[]`	—	Array of tag labels
`readTime`	`string`	—	Estimated reading time
`category`	`string`	—	Blog category badge label

title

Type: string

Default: —

Blog post title

excerpt

Type: string

Default: —

Short excerpt or summary text

image

Type: string

Default: —

Featured image URL

author

Type: { name: string; avatar?: string }

Default: —

Author information

date

Type: string

Default: —

Publication date

tags

Type: string[]

Default: —

Array of tag labels

readTime

Type: string

Default: —

Estimated reading time

category

Type: string

Default: —

Blog category badge label

Previous Map Embed Next Property Listing Card