Content Card
The card layout places the author section at the top with avatar, name, and read time. A circular avatar with a border sits next to stacked text. The main content area contains the title and description at the bottom.
A background image fills the entire card with object-cover. An absolutely positioned overlay div transitions to black at 60% opacity on group hover, using Tailwind's group modifier pattern. All text uses z-index to stay above the overlay.
The card has a fixed 96 height (24rem) with rounded corners and shadow. Content uses justify-between to push the author to the top and title/description to the bottom.
Works well for blog listing pages, article previews, news sites, and any content-heavy layout where author attribution matters.
Explore more
Part of Cards ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time




