Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

disableAutoGriddisableAutoGridbooleanDisables the automatic responsive behavior based on container queries

Panoramica

The <mds-card> web component is the surface container of the Magma Design System: a styled, self-contained panel that groups related media, heading, body and action content into a single bounded region. It is a pure layout shell built on named slots and compound children rather than a replacement for any single HTML primitive.

Semantic Behavior

Layout is inferred, not declared: The card detects which of the media / header / content / footer regions are present (once, when it loads) and reshapes itself to whatever content you provide.Compound parent/child relationship: <mds-card-media>, <mds-card-header>, <mds-card-content> and <mds-card-footer> are recognized by tag name and mapped onto the corresponding region, so they slot in without an explicit slot attribute. Plain elements given the matching slot value land in that region, but the card infers its grid from the tag names of its children, so with plain elements the managed grid does not apply and the regions overlap: use them with disableAutoGrid.Responsive by width: The card’s internal layout switches between stacked and media-beside-content arrangements based on the card’s own width, independent of viewport or theme.Slot regions are fixed: Only the four named regions are rendered; there is no default (unnamed) slot, so loose text or elements without a recognized slot/tag are not laid out.

Properties & Visual Configurations

<mds-card> does not use the shared variant / tone ladders defined in agents/variants.md; it exposes a single behavioral prop. disableAutoGrid (default false) toggles the intrinsic responsive grid. Leave it off to let the card own the placement and reflow of its regions; set it to opt out of the managed grid and lay the slotted content out yourself. Spacing is tuned through the --mds-card-gap and --mds-card-padding CSS custom properties rather than props.