Price table list item<mds-price-table-list-item>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
typographyenumSpecifies if the feature is supported or not
supportedsupportedbooleanSpecifies if the feature is supported or not
Overview
The <mds-price-table-list-item> web component represents a single feature row inside a <mds-price-table-list>, pairing a supported/unsupported status icon with a textual feature label. It is a presentational compound child.
Semantic Behavior
Compound child only: It auto-assigns itself to the parent’s item slot, so it must be a direct child of <mds-price-table-list> and is not used standalone.Drives parent layout: The presence of at least one item is what makes the parent render its separator and feature region.Status icon by supported: When supported is true it renders a filled check-circle icon; when false it renders a horizontal-rule (dash) icon, indicating the feature is absent.Default slot is the label: Text or markup placed in the default slot becomes the feature description, rendered next to the icon.No interactivity: The component is purely presentational - it has no role, selection/active/disabled state, emitted events, or keyboard handling.
Properties & Visual Configurations
supported: Choose true for features included in the plan (check icon) and false for features not included (dash icon). It is the only semantic switch that changes the rendered icon, and is themeable via the --mds-price-table-list-item-supported-* / -unsupported-* CSS custom properties.typography: Selects the text scale applied to both the icon wrapper and the label (the icon itself keeps a fixed size), accepting one of the shared read typography tokens (default detail). Use a larger value such as paragraph when the list should read at body size, or caption for denser tables.