Cards — Amphibious 2.0

Overview

The Cards component provides flexible content containers that can display various types of information in an organized, visually appealing manner. Cards are perfect for product listings, user profiles, articles, statistics, and more.

🎨 Multiple Variants

Product cards, profile cards, stat cards, feature cards, and more specialized layouts.

📱 Responsive Design

Automatically adapts to different screen sizes with responsive aiab-grid systems.

⚡ Interactive States

Hover effects, active states, and focus management for enhanced user experience.

🔧 Flexible Layout

Horizontal and vertical layouts, custom spacing, and aiab-grid system integration.

♿ Accessibility

Focus indicators, screen reader support, and reduced motion preferences.

🎭 Shadow Variants

Multiple shadow depths from subtle to prominent for visual hierarchy.

Basic Usage

Simple Card

Basic Card Example

Card Title

Optional subtitle

This is the main content area of the aiab-card. You can put any content here including text, images, buttons, and more.

<div class="aiab-card">
  <div class="aiab-card-header">
    <h3 class="aiab-card-title">Card Title</h3>
    <p class="aiab-card-subtitle">Optional subtitle</p>
  </div>
  <div class="aiab-card-body">
    <p class="aiab-card-text">Main content goes here...</p>
  </div>
  <div class="aiab-card-footer center">
    <button class="aiab-btn aiab-btn--primary">Action</button>
    <button class="aiab-btn aiab-btn--secondary">Secondary</button>
  </div>
</div>

Card with Image

Card with Media

Image Placeholder

Card with Image

This aiab-card includes a media element at the top, perfect for featured images or videos.

<div class="aiab-card">
  <img src="https://picsum.photos/600/400" alt="Description" class="aiab-card-media">
  <div class="aiab-card-body">
    <h3 class="aiab-card-title">Card with Image</h3>
    <p class="aiab-card-text">Content with image...</p>
  </div>
</div>

Card Variants

Specialized Card Types

Product Image

Premium Headphones

$199.99

JD

John Doe

Senior Developer

1,234 Total Users

Fast Performance

Lightning-fast loading times and smooth interactions.

<!-- Product Card -->
<div class="aiab-card product">
  <img src="product.jpg" alt="Product" class="aiab-card-media">
  <div class="aiab-card-body">
    <h3 class="aiab-card-title">Product Name</h3>
    <div class="price">$199.99</div>
    <div class="aiab-card-actions center">
      <button class="aiab-btn aiab-btn--primary">Add to Cart</button>
    </div>
  </div>
</div>

<!-- Profile Card -->
<div class="aiab-card profile">
  <div class="aiab-card-body">
    <img src="https://placehold.co/200x200/764ba2/FFF?text=User" alt="John Doe" class="aiab-avatar">
    <h3 class="aiab-card-title">John Doe</h3>
    <p class="aiab-card-subtitle">Senior Developer</p>
    <div class="aiab-card-actions center">
      <button class="aiab-btn aiab-btn--primary">Follow</button>
    </div>
  </div>
</div>

<!-- Stat Card -->
<div class="aiab-card aiab-stat">
  <span class="number">1,234</span>
  <span class="label">Total Users</span>
</div>

<!-- Feature Card -->
<div class="aiab-card feature">
  <div class="aiab-card-body">
    <div class="aiab-icon"><i data-lucide="zap"></i></div>
    <h3 class="aiab-card-title">Feature Title</h3>
    <p class="aiab-card-text">Feature description...</p>
  </div>
</div>

Interactive States

Hover and Click Effects

Interactive Cards (hover over them)

Hoverable

Subtle hover effect

Interactive

Strong hover effect

<!-- Subtle hover effect -->
<div class="aiab-card hoverable">
  <div class="aiab-card-body">
    <h4 class="aiab-card-title">Hoverable Card</h4>
    <p class="aiab-card-text">Slight elevation on hover</p>
  </div>
</div>

<!-- Strong interactive effect -->
<div class="aiab-card interactive">
  <div class="aiab-card-body">
    <h4 class="aiab-card-title">Interactive Card</h4>
    <p class="aiab-card-text">Pronounced elevation on hover</p>
  </div>
</div>

Shadow Variants

Different Shadow Depths

No Shadow

Small

Medium

Large

X-Large

<div class="aiab-card aiab-shadow-none">...</div>
<div class="aiab-card aiab-shadow-sm">...</div>
<div class="aiab-card aiab-shadow-md">...</div>  <!-- Default -->
<div class="aiab-card aiab-shadow-lg">...</div>
<div class="aiab-card aiab-shadow-xl">...</div>

Layout Options

Horizontal Layout

Horizontal Card Layout

Image

Horizontal Card

This aiab-card uses a horizontal layout with the image on the left and content on the right. It automatically stacks vertically on mobile.

<div class="aiab-card aiab-horizontal">
  <img src="https://picsum.photos/600/400" alt="Description" class="aiab-card-media">
  <div class="aiab-card-content">
    <div class="aiab-card-body">
      <h3 class="aiab-card-title">Horizontal Card</h3>
      <p class="aiab-card-text">Content goes here...</p>
    </div>
    <div class="aiab-card-footer">
      <button class="aiab-btn aiab-btn--primary">Action</button>
    </div>
  </div>
</div>

Card Grid System

Responsive Card Grid

Card 1

Grid item content

Card 2

Grid item content

Card 3

Grid item content

<div class="aiab-card-grid cols-3">
  <div class="aiab-card">...</div>
  <div class="aiab-card">...</div>
  <div class="aiab-card">...</div>
</div>

<!-- Available aiab-grid classes -->
<div class="aiab-card-grid">        <!-- Auto-fit, min 300px -->
<div class="aiab-card-grid cols-2">  <!-- 2 columns -->
<div class="aiab-card-grid cols-3">  <!-- 3 columns -->
<div class="aiab-card-grid cols-4">  <!-- 4 columns -->

CSS Classes Reference

Base Classes

Class	Description
`.aiab-card`	Base aiab-card aiab-container
`.aiab-card-header`	Card header section
`.aiab-card-body`	Main content area
`.aiab-card-footer`	Footer section
`.aiab-card-media`	Image or media element
`.aiab-card-title`	Card title styling
`.aiab-card-subtitle`	Card subtitle styling
`.aiab-card-text`	Body text styling
`.aiab-card-actions`	Action buttons aiab-container

Modifier Classes

Class	Description
`.hoverable`	Subtle hover effect
`.interactive`	Strong hover effect
`.horizontal`	Horizontal layout
`.compact`	Reduced padding
`.spacious`	Increased padding
`.borderless`	Remove border
`.outlined`	Border with no shadow
`.aiab-loading`	Loading shimmer effect

Shadow Classes

Class	Description
`.aiab-shadow-none`	No shadow
`.aiab-shadow-sm`	Small shadow
`.aiab-shadow-md`	Medium shadow (default)
`.aiab-shadow-lg`	Large shadow
`.aiab-shadow-xl`	Extra large shadow

Specialized Types

Class	Description
`.product`	Product aiab-card styling
`.profile`	User profile aiab-card
`.aiab-stat`	Statistics display aiab-card
`.feature`	Feature highlight aiab-card

Best Practices

Content Guidelines

Keep titles concise: Card titles should be short and descriptive
Use appropriate hierarchy: Use aiab-card-title for main headings, aiab-card-subtitle for secondary info
Limit content: Cards work best with focused, scannable content
Consistent imagery: Use consistent aspect ratios for aiab-card images

Layout Considerations

Grid consistency: Use the aiab-card-grid system for uniform layouts
Mobile first: Consider how cards stack on smaller screens
Loading states: Use the loading class for async content
Action placement: Place primary actions in the footer or prominently in the body

Accessibility

Focus indicators: Interactive cards have focus styles built-in
Semantic markup: Use proper heading hierarchy within cards
Alt text: Always provide alt text for aiab-card images
Keyboard navigation: Ensure all interactive elements are keyboard accessible

Complete Examples

E-commerce Product Card

Product Image

Wireless Headphones

$149.99

Premium sound quality with active noise cancellation.

Team Member Card

SK

Sarah Kim

Lead Designer

Passionate about creating intuitive user experiences and beautiful interfaces.