Card

<!-- Standard Card -->
<div class="lyd-card">
    <div class="lyd-card-header">
        <h3 class="lyd-card-title">Card Title</h3>
        <div class="lyd-card-subtitle">Optional subtitle</div>
    </div>
    <div class="lyd-card-body">
        <p>Your card content goes here.</p>
    </div>
    <div class="lyd-card-footer">
        <button class="lyd-button secondary">Cancel</button>
        <button class="lyd-button primary">Confirm</button>
    </div>
</div>

<!-- Image Card -->
<div class="lyd-card">
    <img src="image.jpg" alt="Description" class="lyd-card-image">
    <div class="lyd-card-body">
        <h3 class="lyd-card-title">Image Card</h3>
        <p>Content below the image.</p>
    </div>
</div>

// Make card clickable
document.querySelectorAll('.lyd-card.clickable').forEach(card => {
    card.addEventListener('click', () => {
        // Navigate to detail page
        window.location.href = card.dataset.href;
    });
});

// Card hover effects
document.querySelectorAll('.lyd-card').forEach(card => {
    card.addEventListener('mouseenter', () => {
        card.style.transform = 'translateY(-4px)';
    });
    
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'translateY(0)';
    });
});

// components/Card.tsx
import { ReactNode, HTMLAttributes } from 'react';

interface CardProps extends HTMLAttributes {
  title?: string;
  subtitle?: string;
  image?: string;
  footer?: ReactNode;
  variant?: 'default' | 'elevated' | 'compact';
  status?: 'success' | 'warning' | 'error' | 'info';
  horizontal?: boolean;
  clickable?: boolean;
  children: ReactNode;
}

export const Card = ({
  title,
  subtitle,
  image,
  footer,
  variant = 'default',
  status,
  horizontal = false,
  clickable = false,
  children,
  className = '',
  ...props
}: CardProps) => {
  const cardClasses = [
    'lyd-card',
    variant !== 'default' && variant,
    status,
    horizontal && 'horizontal',
    clickable && 'clickable',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <div className={cardClasses} {...props}>
      {image && (
        <img src={image} alt="" className="lyd-card-image" />
      )}
      
      {horizontal ? (
        <div className="lyd-card-content">
          {(title || subtitle) && (
            <div className="lyd-card-header">
              {title && <h3 className="lyd-card-title">{title}</h3>}
              {subtitle && <div className="lyd-card-subtitle">{subtitle}</div>}
            </div>
          )}
          <div className="lyd-card-body">{children}</div>
          {footer && <div className="lyd-card-footer">{footer}</div>}
        </div>
      ) : (
        <>
          {(title || subtitle) && (
            <div className="lyd-card-header">
              {title && <h3 className="lyd-card-title">{title}</h3>}
              {subtitle && <div className="lyd-card-subtitle">{subtitle}</div>}
            </div>
          )}
          <div className="lyd-card-body">{children}</div>
          {footer && <div className="lyd-card-footer">{footer}</div>}
        </>
      )}
    </div>
  );
};