Blog Card Two
A full‑bleed image card with a soft gradient overlay. Title + meta pinned to the bottom; action buttons on the right.
Examples
Default (bottom gradient)
Center fade overlay
Installation
npx shadcn-extras@latest add blog-card-two
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Link for the whole card. |
| image | { src: string; alt?: string } | — | Cover image. |
| title | string | — | Card title (used for aria-label when href present). |
| meta | { category?: string; categoryHref?: string; timeLabel?: string } | — | Bottom meta row. |
| onLike | () => void | — | Like click handler. |
| onBookmark | () => void | — | Bookmark click handler. |
| variant | 'bottom-gradient' | 'center-fade' | 'bottom-gradient' | Overlay style. |
| rounded | string | 'rounded-2xl' | Tailwind radius class on the card. |
| overlayClassName | string | — | Extra classes on overlay layer. |
| titleClassName / metaClassName / actionClassName | string | — | Slot overrides. |