ExpandableCard

'use client';

import { ExpandableCard } from '@/ui/cards/ExpandableCard';

export function ExpandableCardDemo() {
  return (
    <ExpandableCard title="Expandable Card Title" subtitle="Click to expand and see more details">
      <div className="p-20">
        <p className="text-grey">
          This is the expandable content that appears when you click the card. It smoothly animates
          in and out using the ElasticHeight component.
        </p>
      </div>
    </ExpandableCard>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/expandable-card.json
Copy

Usage

Copyimport { ExpandableCard } from '@/docs/lib/ui/expandable-card';
 
export function Component() {
  return (
    <ExpandableCard
      title="Explore the Mediterranean"
      subtitle="Discover amazing destinations"
      image={{
        src: '/images/destination.jpg',
        alt: 'Mediterranean coast',
      }}
      tags={[
        {
          label: 'All Inclusive',
          backgroundColor: 'saffron',
          color: 'black',
        },
      ]}
      onClick={(isExpanded) => {
        console.log('Card expanded:', isExpanded);
      }}
    >
      <div className="p-20">
        <p>
          Experience pristine beaches, crystal-clear waters, and world-class amenities at our
          Mediterranean resorts.
        </p>
      </div>
    </ExpandableCard>
  );
}

API Reference

ExpandableCard

The component also accepts all standard HTML element attributes based on the component prop (defaults to article attributes) via CardProps.

Notes

• Interactive Behavior: The card automatically manages its own expanded/collapsed state internally using React's useState hook.
• Smooth Animations: Uses the ElasticHeight component to provide smooth height transitions when expanding and collapsing content.
• Keyboard Accessible: The clickable area uses the Clickable component, making it fully keyboard accessible with proper ARIA attributes.
• Visual Indicator: A circular button with an arrow icon rotates 180 degrees to indicate the expanded/collapsed state.
• Image Support: When an image is provided, the card displays it as a background with a gradient overlay and automatically changes text to white for better contrast.
• Tag Display: Tags are rendered at the top of the card in a flex-wrap container, allowing multiple tags to flow naturally.
• Semantic HTML: By default renders as an <article> element, but can be customized via the component prop for different semantic contexts.
• Card Styling: Inherits all styling features from the base Card component, including themes (bordered, frame, none) and formats (horizontal, vertical, square, custom).
• State Callback: The onClick callback receives the new expanded state (true/false), allowing parent components to react to state changes.
• Border Behavior: When an image is present, the top border is automatically removed (border-t-0) for a seamless visual appearance.
• Data Attributes: The component sets data-name="ExpandableCard" and data-open={isExpanded} attributes for styling and testing purposes.