Il primo esempio della pagina Pattern, dal vivo.

Panoramica

The <mds-card-media> web component is the media region of a <mds-card>: it wraps an image, video or other visual asset and provides an optional overlay layer for text or controls rendered on top of that asset. It is a layout child with no HTML primitive equivalent - it exists purely to occupy and style the card’s media region.

Semantic Behavior

Compound child only: <mds-card-media> is designed to live as a direct child of <mds-card> and must not be used standalone or mixed in as a different card region.Self-slotting into the parent: It lands in the card’s media region automatically without the author setting any slot, and its presence is factored into the card layout.Two-layer composition: The default slot holds the media asset itself (recommended mds-img or another media component), while the named content slot overlays that asset, bottom-aligned and centered, so overlay text/actions float in front of the media.No interactive state: The component holds no props, state, events, ARIA roles or focus behavior of its own - it is a passive presentational wrapper, and any semantics come from the elements slotted into it.

Slot semantics and layout role

<mds-card-media> exposes no configurable properties; its behavior is entirely defined by its two slots and its position inside the card. default slot: the media surface. Place the actual visual asset here (an mds-img, video, or equivalent component). This layer fills the host.content slot: an overlay layer (exposed as the content shadow part) positioned over the media, aligned to the bottom and horizontally centered, intended for captions, titles, or action controls that should appear in front of the media rather than beside it. The host paints a neutral background, so the media region keeps a defined surface even before its asset loads. Neither this component nor the parent card uses the shared variant/tone system of agents/variants.md.