Site Blog Card

Blog Card

A story from the road: its landscape, a title in the voice, who and when.

Preview

Fly off Billing. Land in Bir.

Fly off Billing. Land in Bir. Look back up. A weekend of take-offs, from the ridge to the landing field.

Drift the backwaters on a houseboat. Let the day slow down. Three slow days in Alleppey, on the water.

Usage

tsx

import { BlogCard } from "zostel-ui";

<BlogCard
  title="Fly off Billing. Land in Bir."
  excerpt="A weekend of take-offs, from the ridge to the landing field."
  imageUrl="/brand/scenes/valleys.svg"
  author="Zostel"
  date="October"
  tags={["fly", "land", "laugh"]}
  href="/stories/bir"
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Two lines at most.
`excerpt`	`string`	—	Three lines at most.
`imageUrl`	`string`	—	A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.
`author / date`	`string`	—	Who and when.
`tags`	`string[]`	`[]`	Verbs work best.
`href`	`string`	—	Makes the card a link.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

title

Type: string

Default: —

Two lines at most.

excerpt

Type: string

Default: —

Three lines at most.

imageUrl

Type: string

Default: —

A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.

author / date

Type: string

Default: —

Who and when.

tags

Type: string[]

Default: []

Verbs work best.

href

Type: string

Default: —

Makes the card a link.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).