TheMagin UITheMagin UIPRO

Card

Content containers for grouped information

Card

Cards group related content — title, media, summary, and actions.

Structure

  • Header (title, meta)
  • Media (image or icon)
  • Body (text)
  • Footer (actions)

Example

function ProductCard() {
  return (
    <div className="card">
      <img src="/images/product.jpg" alt="Product" />
      <div className="p-4">
        <h3 className="text-lg font-semibold">Product name</h3>
        <p className="text-sm text-muted-foreground">Short description.</p>
        <div className="mt-3">
          <button className="btn btn-primary">Buy</button>
          <button className="btn btn-ghost">Details</button>
        </div>
      </div>
    </div>
  );
}

Notes

  • Make the entire card or specific CTA tabbable. Use role/link semantics for clickable cards.

On this page