Hover Reveal Card

Card that displays an image with teaser content, then slides up a full details panel on hover with staggered Motion.dev animations.

npx uniqueui add hover-reveal-card

Preview

AI for inclusive growth: Leadership lessons from Davos

Article

Usage

import { HoverRevealCard } from "@/components/ui/hover-reveal-card";

export default function Example() {
  return (
    <div className="flex flex-wrap gap-6 items-start justify-center p-10">
      <HoverRevealCard
        image="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=600&q=80"
        imageAlt="People at a conference table"
        tag="AI"
        title="AI for inclusive growth: Leadership lessons from Davos"
        subtitle="Article"
        description="What are the practical ways to ensure AI expands opportunity, strengthens resilience and supports a more inclusive, equitable future?"
        ctaText="Read the article →"
        accentColor="#6366f1"
        imageHeight={220}
        className="w-72"
      />
    </div>
  );
}

Props

Prop	Type	Description
`image`	`string`	URL of the image displayed as the card's primary visual.
`imageAlt`	`string`	Accessible alt text attached to the img element.
`tag`	`string`	Small uppercase label rendered above the heading in both states.
`title`	`string`	Primary headline text displayed in both the default and reveal states.
`subtitle`	`string`	Supporting line shown beneath the title in the default state and as a footer in the reveal panel.
`description`	`string`	Extended body copy that appears only inside the slide-up hover panel.
`ctaText`	`string`	Call-to-action label rendered at the bottom of the hover panel.
`href`	`string`	When supplied the wrapper renders as an anchor element pointing to this URL.
`accentColor`	`string`	Hex or CSS colour driving the tag, CTA text, and border-glow accent.
`className`	`string`	Tailwind utility classes forwarded onto the outermost card wrapper.
`imageHeight`	`number`	Pixel height reserved for the image section before the content area.