Card component

A general-purpose card with rounded corners, a light shadow, and a hover lift effect — a typical block for product lists, articles, or pricing.

Code

<style>
  .card { background:#161b22;border:1px solid #30363d;border-radius:8px;padding:1.25rem;max-width:280px;transition:transform 0.2s; }
  .card:hover { transform: translateY(-4px); }
</style>
<article class="card">
  <h3 style="margin:0 0 0.5rem;color:#fff">Card heading</h3>
  <p style="margin:0;color:#8b949e;font-size:0.9rem">A short description of the card's content.</p>
</article>

Preview

Explanation

article is used because a card is a self-contained unit of content. The lift effect is implemented via CSS transform on :hover — a smooth animation with no JavaScript at all.

Add a box-shadow on :hover for a more pronounced depth effect.

Related tools

The <article> tag

Purpose of <article>: a self-contained block of content (a blog post, comment, product card).

Responsive CSS Grid cards

A card grid that adapts its column count to screen width, with no media queries.