Blog Card Four

Cover image on top, with a white panel overlapping the bottom edge. Great for article teasers.

Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi necessitatibus repellat voluptatibus?

25 May, 2022

Short, muted variation using the flush layout.

npx shadcn-extras@latest add blog-card-four

Prop	Type	Default	Description
href	`string`	—	Optional link for the whole card.
image	`{ src: string; alt?: string }`	—	Cover image (top).
title	`string`	—	Title text.
excerpt	`string`	—	Optional description.
author	`{ name: string; avatar?: string; href?: string }`	—	Author block in footer.
dateISO / dateLabel	`string`	—	Formatted date display & machine date.
variant	`'attached' \| 'flush'`	`'attached'`	Whether the panel overlaps the image.
*ClassName props	`string`	—	Slot overrides for image/panel/title/excerpt/footer.