Price table list<mds-price-table-list>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live.
Overview
The <mds-price-table-list> web component is a single pricing-plan column inside the <mds-price-table> layout container. It is a compound child that arranges a plan’s heading, feature list, price and call-to-action into a consistent card-like structure built entirely from slots - it has no configurable props.
Semantic Behavior
Compound child: Designed to sit inside <mds-price-table>, directly or in its <mds-price-table-header>; one instance represents one pricing plan, and several siblings line up to form the comparison table. It is not used standalone.Owns the feature-list child type: Feature rows are provided as <mds-price-table-list-item> elements - they are the intended child type for the list body.Conditional list region: The feature region and the separator above it render only when feature items are present when the card loads (items added later do not bring them back); a plan with no features collapses to header plus footer.No interactive state: It renders pure structure with no ARIA attributes (the feature region is a <main> element), no selected/active/disabled state and no emitted events; any interactivity (e.g. the CTA) comes from the components you slot in, such as <mds-button> in the action slot.Footer composition: The price and action slots are grouped together at the bottom of the card.
Properties & Visual Configurations
<mds-price-table-list> exposes no props; it is a layout-only child whose appearance is driven entirely by what you slot into it. Use the named slots to compose a plan:header: the plan title and supporting description (typically <mds-text> elements); rendered at the top.item: the feature rows. <mds-price-table-list-item> children assign themselves to it; any other element needs slot="item". There is no default slot: content without a slot is not rendered.price: the plan’s price, shown in the grouped footer.action: the call-to-action; <mds-button> is recommended.The style hooks are the --mds-price-table-list-separator-color CSS custom property, controlling the divider drawn between the header and the feature list, and the header, content and footer shadow parts.