Image Card

An image-centric card component with overlay content. Supports 'overlay' variant (content centered on image) and 'fullHeight' variant (title at top, content at bottom). Includes configurable overlay styles (dark, light, gradient) and tilt animations.

Installation

$ npx shadcn@latest add @orecus/image-card

Dependencies:

motion

Registry:

@orecus/color-utils@orecus/use-reduced-motion@orecus/use-tilt-animation@orecus/entity-card

Component

Full-bleed image cards with overlay content for properties, items, and assets.

fullHeight Variant

Content overlaid on full-height image. Great for property listings.

Mountain View Cabin

123 Alpine Road · Aspen, CO 81611

2,400 sq ft

Lakeside Retreat

456 Lakeview Dr · Lake Tahoe, CA

3,200 sq ft

overlay Variant

Compact card with image and overlay. Great for item/inventory cards.

Samsung Smart TV 65"

Entertainment

Electronics

$1,299

Bosch Dishwasher

Appliance

maintenance

$899

Props

Prop	Type	Default	Description
`entity`*	`T extends BaseEntity`	—	The entity object to display in the card
`title`*	`CardTitle<T>`	—	Title configuration with key, render function, and left/right content
`image`*	`CardImage<T>`	—	Required image configuration with src, alt, objectFit
`ImageComponent`	`React.ElementType`	`'img'`	Image component to use (e.g., next/image)
`variant`	`'overlay' \| 'fullHeight'`	`'overlay'`	Card layout variant
`overlayStyle`	`'dark' \| 'light' \| 'gradient'`	`'dark'`	Backdrop overlay style
`fields`	`CardField<T>[]`	—	Array of field configurations to display
`footer`	`ReactNode \| ((entity: T) => ReactNode)`	—	Optional footer content
`height`	`number`	`300`	Card height for fullHeight variant
`hoverEffect`	`MaybeEntityValue<T, 'none' \| 'lift' \| 'scale' \| 'tilt'>`	`'none'`	Hover effect style. Supports static value or entity-derived function.
`tiltConfig`	`TiltConfig`	—	Configuration for tilt animation (max angle, perspective, scale, speed). Only used with tilt effects.
`hoverBorder`	`MaybeEntityValue<T, boolean>`	`false`	Whether border color animates on hover. Supports static value or entity-derived function.
`hoverGlow`	`MaybeEntityValue<T, boolean>`	`false`	Whether to show gradient glow effect on hover. Supports static value or entity-derived function.
`onClick`	`(entity: T) => void`	—	Click handler - makes card interactive
`className`	`string`	—	Additional CSS classes
`type`	`MaybeEntityValue<T, 'normal' \| 'subtle' \| 'strong' \| 'solid' \| 'none'>`	`'none'`	Card glass effect variant. Supports static value or entity-derived function.
`accentBar`	`MaybeEntityValue<T, 'none' \| 'top' \| 'bottom'>`	`'none'`	Gradient accent bar position. Supports static value or entity-derived function.
`accentBarVariant`	`MaybeEntityValue<T, 'fade' \| 'solid'>`	`'fade'`	Accent bar gradient style. Supports static value or entity-derived function.
`accentColor`	`MaybeEntityValue<T, ThemeColor>`	`'primary'`	Predefined accent color for accent bar. Supports static value or entity-derived function for dynamic coloring per entity.
`accentBarOnHover`	`MaybeEntityValue<T, boolean>`	`false`	Whether accent bar appears only on hover. Supports static value or entity-derived function.
`loading`	`boolean`	`false`	Shows skeleton loading state when true
`bento`	`BentoConfig`	—	Bento grid configuration. When provided, card uses h-full to fill grid cells. Supports optional minHeight class override.