Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Simple content card
A semantic article card with a clear reading action.
contentarticle
Accessibility
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Image card
A card with an accessible local illustration area and supporting copy.
imagemedia
Accessibility
The example illustration has concise alternative text; use empty alt text for decorative images.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Product card
Product information with explicit price and action hierarchy.
productcommerce
Accessibility
Price is announced with context and the action is a real button.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Horizontal card
A compact responsive card for articles or resources.
horizontalresource
Accessibility
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.