Create a component

I need a reusable card component that shows a title, an image, and a short description for the product list. Build it as a function that returns a DOM element, accepts data with keys title, imgSrc, and summary, and applies accessible attributes so screen readers announce the title. Make the component create elements rather than injecting innerHTML so it is safe for untrusted data.

Before I share this component with the team, make it easier to drop into existing pages: expose a simple API that accepts a plain object for title, imgSrc, summary and a mount target element. Add notes about which parts should be styled externally and flag any attributes or classes that will interfere with global CSS resets.

I built a card component that returns a DOM tree for product pages, but CI intermittently fails because images 404 or slow-load. The stakeholders are content editors and the QA lead. I can't tell if I should add lazy loading, placeholder SVGs, or change how I surface errors. What is the likely diagnosis and the single best change to make the component resilient in tests and previews?

Across projects we keep creating near-duplicate card components with small prop differences. This costs review time and confuses style updates. Where do we lose time and authority, and what habit should we adopt to stop proliferating one-off components while keeping designers happy?