Card

Use GdsCard to group related content on a surface - like a summary, a media preview, or a small set of actions. The default elevated card uses the GDS centerS shadow.

Build cards with these pieces:

• GdsCard - the surface container
• GdsCardContent - the main body content
• GdsCardHeader - optional title, subtitle, avatar, and action
• GdsCardMedia - optional image or video area
• GdsCardActions - optional button row
• GdsCardActionArea - optional clickable area inside the card

Default

A card with GdsCardHeader, GdsCardContent, and GdsCardActions.

Outlined

Use variant="outlined" for a bordered card with no elevation.

With header

Add GdsCardHeader for a title, subheader, avatar, and optional action.

With media

Use GdsCardMedia to show an image or video above the content.

With actions

Group buttons in GdsCardActions at the bottom of the card.

Clickable area

Wrap content in GdsCardActionArea when users should click that part of the card.

Full example

Combine GdsCardHeader, GdsCardMedia, GdsCardContent, and GdsCardActions in one card.

Props