Blog Card One
A developer‑friendly blog/article card. Accessible and customizable with slot classNames. Includes Modern (image left) and Compact (image on top) layouts.
Examples
Modern (image left)
Compact (image top)
Installation
npx shadcn-extras@latest add blog-card-one
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | URL for the whole card (link wrapper). |
| category | {label:string; href?:string} | — | Category/tag chip (optional link). |
| title | string | — | Article title (also used for aria-label). |
| excerpt | string | — | Short summary, truncated to 2 lines by default. |
| image | {src:string; alt?:string} | — | Cover image; empty alt makes it decorative. |
| author | {name:string; avatar?:string; href?:string} | — | Author meta; name can be a link. |
| dateISO | string | — | Machine‑readable date for <time dateTime>. |
| dateLabel | string | — | Human‑readable date text. |
| showActions | boolean | true | Show bookmark and “more” buttons. |
| onBookmark | () => void | — | Click handler for bookmark. |
| onMenu | (e) => void | — | Click handler for kebab menu. |
| variant | 'image-left' | 'image-top' | 'image-left' | Layout. |
| className / *ClassName | string | — | Slot overrides: image/body/title/excerpt/tag. |