Card component pattern

Cards group related content: title, description, optional image, and action. They appear in dashboards, pricing, and lesson catalogs.

HTML shape

<article class="card">
  <h2>Title</h2>
  <p>Summary</p>
  <a class="card__action" href="#">Learn more</a>
</article>

CSS habits

• Border + radius + subtle shadow for depth.
• Consistent padding inside the card.
• BEM-like names (card__title) reduce specificity wars.

Practice

1. Duplicate the card markup—flex gap lays out a row.
2. Add :hover transform on .card (keep motion subtle).

Important interview questions and answers

1. Q: Why use `
   ` for a card?
   A: When the card is a self-contained piece of content (blog post preview, product tile).
2. Q: How do you make a whole card clickable?
   A: Prefer a single link wrapping content or a stretched pseudo-link pattern—avoid nested interactive elements.
3. Q: Shadow vs border for cards?
   A: Often both lightly—border defines edge; shadow suggests elevation.