🎴 ExpandingCard Component

An interactive card that smoothly transitions between compact and expanded layouts. Uses Svelte's built-in crossfade transitions for seamless element morphing. Perfect for galleries, portfolios, or any content that benefits from progressive disclosure.

Database Connected

Interactive Demo

Click to Toggle

Click the card to toggle between compact (vertical) and expanded (horizontal) layouts. Notice how the image, heading, and text smoothly transition between positions.

View Code Example 
<script>
  import ExpandingCard from '$lib/components/ExpandingCard.svelte';
</script>

<ExpandingCard
  imageSrc="https://example.com/image.jpg"
  imageAlt="Description"
  heading="Card Title"
  compactText="Short preview text"
  expandedText="Detailed description with more information"
/>

Database Content

Dynamic Data

These cards are loaded from the database (or fallback data if DATABASE_URL is not configured). Each card maintains visual continuity during the transition.

View Code Example 
<script>
  // Data loaded from server
  let { data } = $props();
</script>

{#each data.expandingCards as card (card.heading)}
  <ExpandingCard
    imageSrc={card.imageSrc}
    imageAlt={card.imageAlt}
    heading={card.heading}
    compactText={card.compactText}
    expandedText={card.expandedText}
    bgColor={card.bgColor}
  />
{/each}

Background Colours

Use the bgColor prop to apply different Tailwind background colours.

Green (bg-green-100)

Orange (bg-orange-100)

Cyan (bg-cyan-100)

Purple (bg-purple-100)

View Code Example 
<ExpandingCard bgColor="bg-green-100" ... />
<ExpandingCard bgColor="bg-orange-100" ... />
<ExpandingCard bgColor="bg-cyan-100" ... />
<ExpandingCard bgColor="bg-purple-100" ... />

Component Features

🎬

Crossfade Transitions

Uses Svelte's built-in crossfade for seamless element morphing between layouts.

🎨

Customisable Content

Configure image, heading, descriptions, and background colours via props.

📱

Responsive Design

Adapts to different screen sizes with mobile-optimised layout scaling.

🚀

Zero Dependencies

Uses only Svelte's built-in transition system - no external libraries.

⚡

Performant

Smooth 60fps animations with efficient DOM updates and transitions.

♿

Accessible

Semantic button element with proper ARIA labels for expand/collapse states.

Quick Start Guide

1

Copy the Component

Copy ExpandingCard.svelte from src/lib/components/ to your project.

2

Prepare Your Content

Gather your image URL, heading text, and description content for both compact and expanded states.

3

Import and Configure

Import the component and pass your content via props. All props are optional with sensible defaults.

Props Reference

PropTypeDefaultDescription
imageSrcstringplaceholderURL to the card image
imageAltstring'Card Image'Alt text for the image
headingstring'Card Title'Card heading text
compactTextstring'Hello Devs...'Text shown in compact layout
expandedTextstring'Yoo devs...'Text shown in expanded layout
bgColorstring'bg-lime-100'Tailwind background colour class

Use Cases

🖼️ Image Galleries

Create interactive photo galleries where users can expand cards for more details.

📰 Article Previews

Show article excerpts that expand to reveal more content without navigation.

🏢 Team Profiles

Compact team member cards that expand to show bio and contact information.

📦 Product Showcases

Display product thumbnails that expand to reveal specifications and pricing.