Cards

Cards

Cards package related content and actions into a visually distinct surface that can be reused across dashboards, products, articles, and profiles.

Core concept

Explain card, card-body, card-title, card-text, card-header, card-footer, links, and images. Show how content hierarchy remains semantic inside the component.

Using it in a real interface

Create a profile card and a product card. Explain why the card should group information that users naturally evaluate together rather than becoming a generic wrapper around unrelated content.

Implementation notes

Do not make every section a card. Excessive boxed surfaces can create visual noise and make the page hierarchy harder to understand.