Image Card Components

Ready

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.

Marcus Chen

Chief Executive Officer

Leading innovation and strategy with 15+ years of experience in tech leadership.

Sarah Mitchell

Chief Operating Officer

Streamlining operations and driving growth across all departments.

Emma Roberts

VP of Design

Creating beautiful, user-centered experiences that delight and inspire.

Aria Kim

Head of Engineering

Building scalable systems and leading world-class engineering teams.

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.

Marcus Chen

Chief Executive Officer

Leading innovation and strategy with 15+ years of experience in tech leadership.

Sarah Mitchell

Chief Operating Officer

Streamlining operations and driving growth across all departments.

Emma Roberts

VP of Design

Creating beautiful, user-centered experiences that delight and inspire.

Aria Kim

Head of Engineering

Building scalable systems and leading world-class engineering teams.

Profile Cards with Stats

Compact profile cards with gradient banner, avatar, and statistics display.

Marcus Chen

Chief Executive Officer

42k

Followers

315

Posts

10k

Likes

Sarah Mitchell

Chief Operating Officer

10k

Followers

495

Posts

12k

Likes

Emma Roberts

VP of Design

38k

Followers

221

Posts

32k

Likes

Aria Kim

Head of Engineering

50k

Followers

194

Posts

23k

Likes

Stacked Cards Layout

Interactive stacked presentation with hover-to-expand animation.

Spotlight / Featured Cards

Large hero-style image cards for featuring important content.

Featured

Leadership Summit 2025

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

New

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.

Featured

Marcus Chen

Chief Executive Officer

Sarah Mitchell

Chief Operating Officer

Emma Roberts

VP of Design

Aria Kim

Head of Engineering

Leadership

Vision & Strategy

Innovation

Design Excellence

Event / Location Cards

Cards with metadata for events, locations, and time-sensitive content.

Conference

Annual Leadership Summit

San Francisco, CA

March 15-16, 2025

5 attending

Workshop

Design Systems Deep Dive

New York, NY

April 22, 2025

3 attending

Meetup

Women in Tech Networking

Virtual Event

May 8, 2025

6 attending

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

10k

Behind the scenes with Emma

Emma Roberts

Behind the scenes with Aria

Aria Kim

Minimal 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.

Marcus Chen

Chief Executive Officer

Sarah Mitchell

Chief Operating Officer

Emma Roberts

VP of Design

Aria Kim

Head of Engineering

Marcus Chen

Chief Executive Officer

Sarah Mitchell

Chief Operating Officer

Emma Roberts

VP of Design

Aria Kim

Head of Engineering

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>