Image Card Components
A comprehensive collection of image and photo card components with multiple variants, layouts, and interactive states. Perfect for portfolios, team pages, media galleries, and content showcases.
Preview
Explore the various card styles and layouts available in the library.
Features
Powerful capabilities built into every component.
8 Card Variants
From basic photo cards to complex media cards with actions, stats, and interactive elements.
Hover Animations
Smooth transitions, scale effects, blur effects, and reveal animations on hover.
4 Layout Systems
Bento grid, masonry, stacked cards, and carousel layouts for flexible presentations.
Team Member Cards
Portrait-style cards with hover reveal for team pages and about sections.
Profile Cards with Stats
Compact profile cards with gradient banner, avatar, and statistics display.

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-to-expand animation.




Spotlight / Featured Cards
Large hero-style image cards for featuring important content.

Leadership Summit 2025
Join industry leaders for an exclusive two-day event focused on innovation and growth strategies.

Behind the Scenes
An inside look at how our team builds products that millions of users love.
Bento Grid Layout
Modern asymmetric grid with varied card sizes for visual interest.

Marcus Chen
Chief Executive Officer

Sarah Mitchell
Chief Operating Officer

Emma Roberts
VP of Design

Aria Kim
Head of Engineering

Vision & Strategy

Innovation
Design Excellence
Event / Location Cards
Cards with metadata for events, locations, and time-sensitive content.

Annual Leadership Summit




Design Systems Deep Dive




Women in Tech Networking



Media Cards with Actions
Interactive cards with like, save, and engagement actions.

Behind the scenes with Marcus
Marcus Chen
Behind the scenes with Sarah
Sarah Mitchell
Behind the scenes with Emma
Emma Roberts
Behind the scenes with Aria
Aria KimMinimal Hover Cards
Clean image cards with content revealed on hover.

Marcus Chen
Chief Executive Officer

Sarah Mitchell
Chief Operating Officer

Emma Roberts
VP of Design

Aria Kim
Head of Engineering
Horizontal Scroll Carousel
Horizontally scrolling card layout for featured content.
Installation
Example usage of the image card components.
Basic Usage
import { TeamMemberCard } from '@/components/image-cards'
<TeamMemberCard
image="/team-member-1.png"
name="Marcus Chen"
role="Chief Executive Officer"
bio="Leading innovation and strategy..."
socials={[
{ icon: <Twitter />, url: '#' },
{ icon: <Linkedin />, url: '#' }
]}
/>Layout System
import { BentoGrid, BentoItem } from '@/components/image-cards'
<BentoGrid>
<BentoItem size="large">
{/* Your content */}
</BentoItem>
<BentoItem size="default">
{/* Your content */}
</BentoItem>
</BentoGrid>