Il primo esempio della pagina Pattern, dal vivo.

Panoramica

The <mds-price-table> web component is the layout container of the Magma Design System pricing-table family. It owns no logic or visual chrome of its own: it stacks its slotted compound children (the plan columns, header and feature matrix) into a coherent pricing comparison surface.

Semantic Behavior

Default slot only: Any markup placed between the tags is projected verbatim. It expects the dedicated compound children (mds-price-table-list, mds-price-table-header, mds-price-table-features, which in turn holds the mds-price-table-features-row / mds-price-table-features-cell matrix) rather than free-form content.Grid layout host: Projected blocks are spaced consistently regardless of how many plans or feature rows are supplied.Responsive composition: It does not switch layouts internally. Two arrangements are expressed through the children and utility classes - a stacked, per-plan layout (each mds-price-table-list carrying its own feature matrix) for narrow viewports, and a shared mds-price-table-header + single mds-price-table-features matrix for wide viewports.No props, events, or state: All configuration lives on the child components.

Properties & Visual Configurations

This component is a pure compound parent and intentionally has no configurable props. Visual variation comes from the children it wraps - for example the type attribute on mds-price-table-features-cell ('label', 'text', 'supported', 'unsupported') drives what each matrix cell renders, and the named slots on mds-price-table-list (header, price, action) position each plan’s heading, price and call-to-action. Refer to those child components’ own documentation for their value ladders.