Blog Card Three
A minimal card with title, small rounded thumbnail, and author + read time. Perfect for compact lists.
Examples
Thumbnail on the right
Thumbnail on the left
Installation
npx shadcn-extras@latest add blog-card-three
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | URL for whole card link. |
| title | string | — | Card title; used for aria-label when linked. |
| thumb | { src: string; alt?: string } | — | Small square thumbnail. |
| meta | { author?: {name:string; avatar?:string; href?:string}; readLabel?: string } | — | Author + reading time. |
| onLike / onBookmark | () => void | — | Action handlers. |
| variant | 'thumb-right' | 'thumb-left' | 'thumb-right' | Layout of thumbnail. |
| className / *ClassName | string | — | Slot overrides for title, thumb, meta, actions. |