Containers

Card

Spectrum 2's container: 10px corners on background-elevated with the emphasized shadow, lifting to the elevated shadow on hover.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'quiet'`
`title`	`React.ReactNode`
`description`	`React.ReactNode`
`headerEnd`	`React.ReactNode`
`footer`	`React.ReactNode`
`image`	`string`
`imageFit`	`'cover' \| 'contain'`	`contain` for product shots: the whole picture on the light product backdrop (`background-product`), never cropped. Default `cover`.
`alt`	`string`
`preview`	`boolean`
`previewIcon`	`IconName`
`padding`	`'M' \| 'L'`
`href`	`string`
`onClick`	`() => void`
`style`	`React.CSSProperties`
`className`	`string`
`children`	`React.ReactNode`

Guidelines

Spectrum 2's container: 10px corners on background-elevated with the emphasized shadow, lifting to the elevated shadow on hover.

Provide: children for the body, optional title, description, headerEnd (a badge or action), footer, image with alt or preview for an empty gray preview well, variant (primary, secondary, tertiary, quiet), padding (M 16 or L 24), and href or onClick to make the whole card a link.

Separate cards with 16 to 24px of space. No borders on primary cards and never a colored stripe down one side.
A whole-card link holds no other buttons; put actions in the footer of a static card instead.

With preview and no image, the preview is a short, quiet strip with a small icon, so cards without a photo stay light. With an image it is the full 140px photo.
Product shots (imageFit: 'contain'): the whole picture sits on the light product backdrop (background-product, light in both themes) with a little room around it, never cropped, so a see-through PNG of black gear and a wide banner both read well. Use it for products and their Files; keep cover for photos that fill the frame.