Price table features<mds-price-table-features>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
labelstringSets a header title for the entire table
Overview
The <mds-price-table-features> web component is the feature-matrix block of the Magma Design System pricing-table family. It is a compound child of <mds-price-table> and renders a table inside its shadow root, turning its slotted rows into the side-by-side feature comparison grid of a pricing table.
Semantic Behavior
Compound child only: Must be placed as a direct slot child of <mds-price-table>; it is not used standalone. Its own default slot expects only mds-price-table-features-row elements, which in turn hold mds-price-table-features-cell children.Table wrapper, not a leaf: The host owns the structural table; the slotted rows and their cells supply the actual row/cell semantics.Optional header band: A header (shadow part header) is rendered only when label is set, displaying the title. With no label the header is omitted and the table starts at the first row.No state, events, or form association: The component is purely presentational. Cell content and per-cell rendering (supported / unsupported / text / label) are decided entirely by the child cells.
Properties & Visual Configurations
This component has essentially one configurable prop:label: Sets an optional title rendered in the header band above the matrix. Provide it to name the feature group (e.g. a section heading shared across all plan columns); omit it when the matrix should appear without a heading.All other variation comes from the slotted children rather than from props. Column widths are computed by each mds-price-table-features-row, and the visual treatment of each cell is driven by the type prop on mds-price-table-features-cell. Spacing can be tuned through --mds-price-table-features-padding (the header band and, by inheritance, every cell) and the header band’s divider through --mds-price-table-features-border-color (the cells draw their own dividers with --mds-price-table-features-cell-border-color), both listed in AGENTS.md.