How do I install Content Card?

Run npx shadcn@latest add @aceternity/cards-demo-2 in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Content Card responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Content Card is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Cards

2 / 4

Content Card

A blog-style card with author avatar, name, read time, and content overlaid on a background image. The overlay darkens on hover.

Manu Arora

2 min read

Author Card

Card with Author avatar, complete name and time to read - most suitable for blogs.

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.

More from Cards

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Background Overlay Card Simple Blog With Grid Feature Block Animated Card Cards Blog Sections

About this block

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.