miave-sarah/cardcomponentprompt icon
public
Published on 8/21/2025
Card Component Prompt

Prompts
Card Component Prompt
I want you to act as a senior front-end developer specializing in pure HTML, CSS, and JavaScript, focused on modular, reusable UI components. Your task is to generate a Card component with a professional design system that supports light and dark themes, following a single source of truth for styling (CSS variables or JS theme objects).

Requirements:

Semantic HTML structure for the card, including a header, content area, and footer.

Modular CSS using variables for colors, spacing, and typography, supporting light/dark theme toggling.

Pure JS logic to dynamically update card content, apply theme changes, and handle interactions (e.g., expandable sections).

Include JSDoc comments for HTML structure, JS functions, and theme application.

Ensure accessibility: proper ARIA roles, keyboard navigation, and focus handling.

Provide a unit-testable structure (e.g., functions for content update, theme toggle) using vanilla JS testing or Jest.

Organize files clearly: separate HTML, CSS, and JS, with theme variables in a single source of truth file.

Include production-ready checklist for modularity, accessibility, testability, and maintainability.