Correct and idiomatic ways to use the <mds-price-table-list-item> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Supported Feature Row

The most common form. Place the component as a direct child of <mds-price-table-list> and set supported to show the check-circle icon. Text in the default slot becomes the feature label.

<mds-price-table-list>
  <mds-price-table-list-item supported>Accesso base</mds-price-table-list-item>
</mds-price-table-list>

Unsupported Feature Row

Omit supported (or leave it at its default false) to render the dash icon, indicating the feature is not included in the plan.

<mds-price-table-list>
  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>
</mds-price-table-list>

Mixed Feature List

Combine supported and unsupported rows inside one <mds-price-table-list> to build the complete plan comparison column.

<mds-price-table-list>
  <mds-price-table-list-item supported>Utenti illimitati</mds-price-table-list-item>
  <mds-price-table-list-item supported>Supporto via chat</mds-price-table-list-item>
  <mds-price-table-list-item supported>Flussi automatizzati</mds-price-table-list-item>
  <mds-price-table-list-item>Analisi avanzata</mds-price-table-list-item>
  <mds-price-table-list-item>Esportazione report</mds-price-table-list-item>
  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>
</mds-price-table-list>

Feature Row with Contextual Help

The default slot accepts more than plain text. Slot an <mds-help> inline next to the label when a feature needs a short explanation.

<mds-price-table-list>
  <mds-price-table-list-item supported>
    20 GB di spazio per utente
    <mds-help>Lo spazio viene condiviso fra tutti i membri del piano.</mds-help>
  </mds-price-table-list-item>
</mds-price-table-list>

Adjusting Typography Scale

Use the typography prop to control the text size across the whole row; the icon keeps its fixed size. The default detail fits dense tables; switch to paragraph for a more readable presentation or caption for compact layouts.

<!-- Default (detail) -->
<mds-price-table-list-item supported>Funzionalita di base</mds-price-table-list-item>

<!-- Body-size presentation -->
<mds-price-table-list-item supported typography="paragraph">Funzionalita di base</mds-price-table-list-item>

<!-- Compact table -->
<mds-price-table-list-item typography="caption">Accesso API</mds-price-table-list-item>

Full Plan Column

The full compound pattern: <mds-price-table-list> with header, items, a price, and a call-to-action.

<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Business</mds-text>
  <mds-text typography="detail" slot="header">
    Adatto a team di medie dimensioni con esigenze collaborative avanzate.
  </mds-text>

  <mds-price-table-list-item supported>Utenti illimitati</mds-price-table-list-item>
  <mds-price-table-list-item supported>Supporto prioritario</mds-price-table-list-item>
  <mds-price-table-list-item supported>Flussi automatizzati</mds-price-table-list-item>
  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>

  <mds-text typography="h2" slot="price">99 EUR</mds-text>
  <mds-button slot="action" variant="primary" tone="strong">Inizia ora</mds-button>
</mds-price-table-list>

Styling Customization

Override the icon colors only through the documented --mds-price-table-list-item-* CSS custom properties. Name a semantic role, rgb(var(--magma-<role>)) (agents/color.md), so dark mode and high-contrast keep working. --mds-price-table-list-item-supported-icon-color-hover is declared but no hover state reads it today, so setting it has no effect.

.promo-column mds-price-table-list-item {
  --mds-price-table-list-item-supported-icon-color: rgb(var(--magma-accent-fg));
  --mds-price-table-list-item-unsupported-icon-color: rgb(var(--magma-text-subtle));
}