Patterns
Blog Card
A blog post preview card with cover image, category, meta row, and tags.
A blog post preview card with a cover image, category badge, meta row (date, reading time, author), and tag chips. It links to the post via the injected Link adapter, and offers a featured variant that spans two columns on md+ grids.
Import
import { BlogCard } from "@yuhuanowo/yunui/patterns";
Example
BlogCard
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| author | { name?: string; avatar?: string; url?: string | undefined; } | undefined | — | Post author (name shown in the meta row). |
| category | string | — | Category label shown as an info badge. |
| coverImage | string | — | Cover image URL; a placeholder icon is shown when absent. |
| date | string | — | Publish date (ISO string); formatted via `locale`. |
| description | string | — | Short excerpt/summary. |
| locale | string | — | Locale for the date; defaults to a stable "en-US" (SSR-safe). |
| readingTime | number | — | Estimated reading time in minutes. |
| tags | string[] | — | Tag list (first 3 rendered as clickable chips). |
| title* | string | — | Post title. |
| url* | string | — | Destination the card links to. |
| variant | "default" | "featured" | default | Layout: `default` or `featured` (spans 2 columns on `md`+). |