Image Cards

Data Display

Media

Layout

A comprehensive collection of image and photo card components with multiple variants, layouts, and interactive states for portfolios, team pages, and media galleries.

Preview

Team member cards with hover reveal

Marcus Chen

Chief Executive Officer

Leading innovation and strategy with 15+ years of experience.

Sarah Mitchell

Chief Operating Officer

Streamlining operations and driving growth.

Emma Roberts

VP of Design

Creating beautiful, user-centered experiences.

Aria Kim

Head of Engineering

Building scalable systems and leading engineering teams.

Card Types

Different card layouts for various use cases

Profile Cards with Stats

Marcus Chen

Chief Executive Officer

12k

Followers

234

Posts

Likes

Sarah Mitchell

Chief Operating Officer

12k

Followers

234

Posts

Likes

Media Cards with Actions

Behind the scenes with Marcus

Marcus Chen

5.2k

Behind the scenes with Sarah

Sarah Mitchell

5.2k

Minimal Hover Cards

Marcus Chen

Chief Executive Officer

Sarah Mitchell

Chief Operating Officer

Emma Roberts

VP of Design

Aria Kim

Head of Engineering

Spotlight Cards

Large hero-style cards for featured content

Featured

Leadership Summit 2025

Join industry leaders for an exclusive event focused on innovation.

New

Behind the Scenes

An inside look at how our team builds products.

Event Cards

Cards with metadata for events and locations

Conference

Annual Leadership Summit

San Francisco, CA

March 15-16, 2025

3 attending

Workshop

Design Systems Deep Dive

New York, NY

April 22, 2025

2 attending

Meetup

Women in Tech Networking

Virtual Event

May 8, 2025

4 attending

Bento Grid Layout

Modern asymmetric grid with varied card sizes

Featured

Marcus Chen

Chief Executive Officer

Sarah Mitchell

Chief Operating Officer

Emma Roberts

VP of Design

Aria Kim

Head of Engineering

Stacked Cards Layout

Interactive stacked presentation with hover animation

Carousel Layout

Horizontally scrolling card layout

Marcus Chen

Chief Executive Officer

Sarah Mitchell

Chief Operating Officer

Emma Roberts

VP of Design

Aria Kim

Head of Engineering

Props

Component API reference

ImageCard

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Card content
`variant`	`'default' \| 'elevated' \| 'glass' \| 'gradient' \| 'minimal'`	`'default'`	Visual style variant
`aspectRatio`	`'auto' \| 'square' \| 'portrait' \| 'landscape' \| 'wide' \| 'ultrawide' \| 'tall'`	`'auto'`	Image aspect ratio
`onClick`	`() => void`	—	Click handler
`className`	`string`	—	Additional CSS classes

TeamMemberCard

Prop	Type	Default	Description
`image*`	`string`	—	Image URL
`name*`	`string`	—	Member name
`role*`	`string`	—	Job title
`bio`	`string`	—	Short biography
`socials`	`{ icon: ReactNode, url: string }[]`	—	Social media links

ProfileCard

Prop	Type	Default	Description
`image*`	`string`	—	Avatar image URL
`name*`	`string`	—	Profile name
`role*`	`string`	—	Role or title
`stats`	`{ value: string, label: string }[]`	—	Statistics to display
`verified`	`boolean`	`false`	Show verified badge

BentoItem

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Item content
`size`	`'default' \| 'wide' \| 'tall' \| 'large' \| 'featured'`	`'default'`	Grid span size
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation examples

import {
  ImageCard,
  TeamMemberCard,
  ProfileCard,
  MediaCard,
  SpotlightCard,
  EventCard,
  MinimalHoverCard,
  BentoGrid,
  BentoItem,
  StackedCards,
  CardCarousel
} from '@/components/ui/image-cards'
import { Twitter, Linkedin } from 'lucide-react'

// Team member card
<TeamMemberCard
  image="/team-member.jpg"
  name="Marcus Chen"
  role="Chief Executive Officer"
  bio="Leading innovation and strategy..."
  socials={[
    { icon: <Twitter className="w-4 h-4" />, url: '#' },
    { icon: <Linkedin className="w-4 h-4" />, url: '#' }
  ]}
/>

// Profile card with stats
<ProfileCard
  image="/avatar.jpg"
  name="Sarah Mitchell"
  role="Product Designer"
  verified
  stats={[
    { value: '12k', label: 'Followers' },
    { value: '234', label: 'Posts' }
  ]}
/>

// Bento grid layout
<BentoGrid>
  <BentoItem size="large">
    {/* Featured content */}
  </BentoItem>
  <BentoItem>
    {/* Regular content */}
  </BentoItem>
  <BentoItem size="wide">
    {/* Wide content */}
  </BentoItem>
</BentoGrid>

// Stacked cards
<StackedCards
  cards={[
    { image: '/1.jpg', title: 'Card 1', subtitle: 'Description' },
    { image: '/2.jpg', title: 'Card 2', subtitle: 'Description' },
    { image: '/3.jpg', title: 'Card 3', subtitle: 'Description' }
  ]}
/>

Features

Built-in functionality

8 card variants: Team member, profile, media, spotlight, event, minimal hover, and more
5 style variants: Default, elevated, glass, gradient, and minimal styles
7 aspect ratios: Auto, square, portrait, landscape, wide, ultrawide, tall
Hover animations: Scale, blur, reveal, and slide transitions
Interactive states: Like, save, and play button interactions
Layout systems: Bento grid, stacked cards, and carousel layouts
Social links: Configurable social media icon links
Dark mode: Full dark mode support with adjusted colors

Accessibility

Accessibility considerations

ARIA Attributes

Images include descriptive alt textInteractive elements are properly labeledSocial links use accessible anchor elements

Keyboard Navigation

Key	Action
`Tab`	Navigate between interactive elements
`Enter / Space`	Activate buttons and links

Notes

All interactive cards maintain focus visibility
Hover effects have equivalent focus states
Color contrast meets WCAG guidelines
Animations respect prefers-reduced-motion

Related Components

Card Avatar Badge Carousel