SGDS Card Component Skill

<sgds-card> is a general-purpose content card supporting images, icons, titles, descriptions, and a footer link area. For image-forward cards with overlays use <sgds-image-card>; for icon-led cards use <sgds-icon-card>; for thumbnail cards use <sgds-thumbnail-card>.

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?

• General content with image or icon → <sgds-card> (this component)
• Image-forward with badge/action overlays → <sgds-image-card>
• Icon-led vertically centered layout → <sgds-icon-card>
• Small thumbnail image beside content → <sgds-thumbnail-card>