Card Component

Flexible content container with header, body, and footer sections supporting multiple layouts

Live Demo

Loading demo...

Documentation

# Card Component

A flexible content container component with header, body, and footer sections. Supports various layouts, interactive states, and rich content including images, tags, and action buttons.

Features

Multiple Layouts: Vertical, horizontal, minimal, and image-based cards
Interactive States: Hover effects, click handling, expandable content
Rich Content: Images, badges, tags, meta information
Action Support: Header actions, footer buttons, favorite toggles
Accessibility: Semantic HTML, ARIA labels, keyboard navigation
Dark Mode: Automatic dark mode support
Responsive: Mobile-optimized grid layout

Usage Examples

Basic Card


  
    Card Title

  

  
    Card content goes here.

Card with Image


  
    
  

  
    Featured Content

Interactive Card

// Listen for card clicks
document.addEventListener('card:click', (e) => {
  console.log('Card clicked:', e.detail.card);
});// Filter cards by tag
document.dispatchEvent(new CustomEvent('card:filter', {
  detail: { tag: 'javascript' }
}));

Programmatic Creation

const newCard = cardComponent.createCard({
  title: 'Dynamic Card',
  text: 'Created programmatically',
  tags: ['new', 'featured'],
  image: 'https://example.com/image.jpg'
});
document.querySelector('.card-showcase').appendChild(newCard);

Component Variants

Default Card

Standard card with header, body, and footer sections.

Image Card

Card with a featured image at the top, perfect for visual content.

Horizontal Card

Side-by-side layout with image and content, ideal for lists.

Interactive Card

Clickable card with hover effects and keyboard navigation.

Minimal Card

Clean design with subtle borders, no shadows.

Events

Event	Description	Detail
`card:click`	Fired when interactive card is clicked	`{ card: HTMLElement }`
`card:action`	Fired when action button is clicked	`{ card, action, button }`
`card:edited`	Fired after inline editing	`{ card, title, text }`
`card:filter`	Filter cards by tag/category	`{ tag, category }`
`card:sort`	Sort cards	`{ sortBy }`

Accessibility Notes

Semantic Structure: Uses
element with proper heading hierarchy
ARIA Labels: All interactive elements have descriptive labels
Keyboard Navigation: Full keyboard support with Tab and Enter/Space keys
Focus Indicators: Clear visual focus states with 2px outline
Screen Reader Support: Proper announcements for all states and actions
Color Contrast: WCAG AA compliant color combinations
Responsive Touch Targets: Minimum 44x44px for mobile devices

CSS Variables

/ Customize card appearance /
--card-bg: white;
--card-border: #e5e7eb;
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--card-radius: 0.75rem;
--card-padding: 1.25rem;

Best Practices

1. Always include meaningful titles and alt text for images
2. Use semantic HTML structure (article, header, footer)
3. Provide keyboard navigation for interactive cards
4. Ensure sufficient color contrast for text
5. Use lazy loading for images in long lists
6. Keep card content concise and scannable
7. Group related actions in the card footer

Component Code

HTML Structure

<!-- Card Component HTML -->
<div class="card-showcase">
  <!-- Basic Card -->
  <article class="card" role="article" aria-labelledby="card-title-1">
    <header class="card-header">
      <h3 id="card-title-1" class="card-title">Card Title</h3>
    </header>
    <div class="card-body">
      <p class="card-text">This is a basic card with a header, body, and footer. Cards are flexible content containers.</p>
    </div>
    <footer class="card-footer">
      <button class="card-button" aria-label="Learn more about Card Title">Learn More</button>
    </footer>
  </article>

  <!-- Card with Image -->
  <article class="card card-with-image" role="article" aria-labelledby="card-title-2">
    <div class="card-image-wrapper">
      <img src="https://via.placeholder.com/400x200" alt="Placeholder image" class="card-image" loading="lazy">
    </div>
    <header class="card-header">
      <h3 id="card-title-2" class="card-title">Featured Content</h3>
      <p class="card-subtitle">Subtitle or category</p>
    </header>
    <div class="card-body">
      <p class="card-text">Cards can include images, making them perfect for showcasing visual content alongside text.</p>
    </div>
    <footer class="card-footer">
      <button class="card-button card-button-primary">View Details</button>
      <button class="card-button card-button-secondary">Share</button>
    </footer>
  </article>

  <!-- Horizontal Card -->
  <article class="card card-horizontal" role="article" aria-labelledby="card-title-3">
    <div class="card-image-wrapper">
      <img src="https://via.placeholder.com/200x200" alt="Thumbnail" class="card-image" loading="lazy">
    </div>
    <div class="card-content">
      <header class="card-header">
        <h3 id="card-title-3" class="card-title">Horizontal Layout</h3>
        <p class="card-subtitle">Flexible orientation</p>
      </header>
      <div class="card-body">
        <p class="card-text">Cards can be displayed horizontally for a different visual hierarchy.</p>
      </div>
      <footer class="card-footer">
        <button class="card-button">Action</button>
      </footer>
    </div>
  </article>

  <!-- Interactive Card -->
  <article class="card card-interactive" role="article" aria-labelledby="card-title-4" tabindex="0">
    <header class="card-header">
      <h3 id="card-title-4" class="card-title">Interactive Card</h3>
      <span class="card-badge">New</span>
    </header>
    <div class="card-body">
      <p class="card-text">This entire card is interactive and can be clicked or focused via keyboard.</p>
      <div class="card-tags">
        <span class="card-tag">Tag 1</span>
        <span class="card-tag">Tag 2</span>
        <span class="card-tag">Tag 3</span>
      </div>
    </div>
    <footer class="card-footer">
      <span class="card-meta">Updated 2 hours ago</span>
      <button class="card-icon-button" aria-label="Favorite">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
      </button>
    </footer>
  </article>

  <!-- Minimal Card -->
  <article class="card card-minimal" role="article" aria-labelledby="card-title-5">
    <div class="card-body">
      <h3 id="card-title-5" class="card-title">Minimal Design</h3>
      <p class="card-text">A clean, minimal card design without header or footer sections.</p>
    </div>
  </article>

  <!-- Card with Actions -->
  <article class="card" role="article" aria-labelledby="card-title-6">
    <header class="card-header card-header-actions">
      <h3 id="card-title-6" class="card-title">Card with Actions</h3>
      <div class="card-actions">
        <button class="card-action-button" aria-label="Edit">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
          </svg>
        </button>
        <button class="card-action-button" aria-label="Delete">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="3 6 5 6 21 6"/>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
          </svg>
        </button>
      </div>
    </header>
    <div class="card-body">
      <p class="card-text">Cards can include action buttons in the header for quick operations.</p>
    </div>
  </article>
</div>

Properties & Features

Features

Multiple Layouts
Interactive States
Rich Content
Action Support
Accessibility
Dark Mode
Responsive

Browser Support

Chrome 90+Firefox 88+Safari 14+Edge 90+

Last Updated

2025-10-30

Usage Tips

Installation

Copy the HTML, CSS, and JavaScript code above into your project files.

Customization

Modify CSS variables and classes to match your design system.

Accessibility

Ensure all interactive elements have proper ARIA labels and keyboard support.

Responsive Design

Test the component across different screen sizes and devices.

Card Component

Live Demo

Documentation

Features

Usage Examples

Basic Card

Card with Image

Interactive Card

Programmatic Creation

Component Variants

Default Card

Image Card

Horizontal Card

Interactive Card

Minimal Card

Events

Accessibility Notes

CSS Variables

Best Practices

Component Code

Properties & Features

Tags

Features

Browser Support

Last Updated

Usage Tips

Installation

Customization

Accessibility

Responsive Design