Image Card

Advanced media containers with multiple layout variants, hover effects, and aspect ratio control.

Preview & Interactive Laboratory

Standard Variant

Pro

Smart Automation

Streamline your workflow with high-performance AI engines and real-time processing.

Full Background

Live

Data Visualization

25.4k active nodes monitoring global traffic patterns in real-time.

Interactive Overlay

Creative Design

Stratum UI system.

Wide Aspect (21:9)

Network Topology

Usage & Implementation

import { ImageCard } from "@/components/ui/image-card"

// Standard
<ImageCard 
  title="Product Launch" 
  image="/hero.jpg" 
/>

// Full Background
<ImageCard 
  variant="full" 
  title="Analytics" 
  image="/stats.jpg" 
/>

React / Tailwind

Granular Customization

Container

The main card wrapper.

className={`className`}

Image

The underlying Next.js Image component.

className={`-`}

Overlay

The gradient or blur overlay.

className={`variant='full' | 'overlay'`}

API Reference (Props)

Prop	Type	Default	Description
variant	'standard' \| 'full' \| 'overlay'	standard	Visual style of the card.
aspectRatio	'square' \| 'video' \| 'portrait' \| 'wide'	video	The height/width ratio.
image	string	-	Source URL for the image.
footer	ReactNode	-	Optional actions at the bottom.