SGDS Image Card Component Skill

<sgds-image-card> is a card variant where a full-width photograph or illustration is the primary visual. It uniquely supports image-badge and image-action overlay slots on top of the image.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Which card type?

• Full-width photograph leads the card with optional overlays → <sgds-image-card> (this component)
• Icon-led card → <sgds-icon-card>
• Small thumbnail beside content → <sgds-thumbnail-card>
• General mixed content → <sgds-card>