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

Minimal Plan Column (Header + Price + Action)

The simplest form: a plan name, a price, and a call-to-action. Feature rows are optional - the separator and the item region are omitted automatically when no <mds-price-table-list-item> children are present.

<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Base</mds-text>
  <mds-text typography="detail" slot="header">Adatto a professionisti individuali.</mds-text>

  <mds-text typography="h2" slot="price">49 &euro;/mese</mds-text>
  <mds-button slot="action" variant="dark">Inizia ora</mds-button>
</mds-price-table-list>

Full Plan Column with Feature List

Add <mds-price-table-list-item> children directly inside the component (no explicit slot attribute needed - the element self-assigns to the correct internal slot). Use supported to toggle the check / dash icon.

<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Pro</mds-text>
  <mds-text typography="detail" slot="header">Ideale per team di medie dimensioni.</mds-text>

  <mds-price-table-list-item supported>Funzionalita di base</mds-price-table-list-item>
  <mds-price-table-list-item supported>Fino a 50 utenti</mds-price-table-list-item>
  <mds-price-table-list-item supported>100 GB di spazio per utente</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 automatici</mds-price-table-list-item>
  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>
  <mds-price-table-list-item>Report avanzati</mds-price-table-list-item>

  <mds-text typography="h2" slot="price">99 &euro;/mese</mds-text>
  <mds-button slot="action" variant="primary" tone="strong">Attiva piano</mds-button>
</mds-price-table-list>

Composing Multiple Plans Inside <mds-price-table>

<mds-price-table-list> is a compound child of <mds-price-table>. Place one instance per pricing plan as a direct slot child of the parent.

<mds-price-table>
  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Piano Base</mds-text>
    <mds-price-table-list-item supported>Funzionalita essenziali</mds-price-table-list-item>
    <mds-price-table-list-item>API access</mds-price-table-list-item>
    <mds-text typography="h2" slot="price">29 &euro;</mds-text>
    <mds-button slot="action" variant="dark">Scegli</mds-button>
  </mds-price-table-list>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Piano Pro</mds-text>
    <mds-price-table-list-item supported>Funzionalita essenziali</mds-price-table-list-item>
    <mds-price-table-list-item supported>API access</mds-price-table-list-item>
    <mds-text typography="h2" slot="price">79 &euro;</mds-text>
    <mds-button slot="action" variant="primary" tone="strong">Scegli</mds-button>
  </mds-price-table-list>
</mds-price-table>

Feature Item with Contextual Help

Nest an <mds-help> component inside a <mds-price-table-list-item> to add an inline tooltip for features that need extra explanation. Place it after the label text in the default slot.

<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Enterprise</mds-text>

  <mds-price-table-list-item supported>
    SLA garantito
    <mds-help>Disponibilita del 99,9% con monitoraggio dedicato.</mds-help>
  </mds-price-table-list-item>
  <mds-price-table-list-item supported>
    Archiviazione illimitata
    <mds-help>Soggetta a policy di utilizzo equo.</mds-help>
  </mds-price-table-list-item>
  <mds-price-table-list-item supported>Supporto telefonico 24/7</mds-price-table-list-item>

  <mds-text typography="h2" slot="price">Su richiesta</mds-text>
  <mds-button slot="action" variant="primary" tone="strong">Contattaci</mds-button>
</mds-price-table-list>

Adjusting Feature-Item Typography

<mds-price-table-list-item> accepts a typography prop ("caption", "detail" (default), "paragraph") to match the density of the surrounding layout. Apply a consistent value to all items in the same list.

<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Starter</mds-text>

  <mds-price-table-list-item supported typography="caption">5 utenti</mds-price-table-list-item>
  <mds-price-table-list-item supported typography="caption">1 GB di spazio</mds-price-table-list-item>
  <mds-price-table-list-item typography="caption">Esportazione dati</mds-price-table-list-item>

  <mds-text typography="h3" slot="price">Gratuito</mds-text>
  <mds-button slot="action" variant="dark" tone="outline">Registrati</mds-button>
</mds-price-table-list>

Styling via CSS Custom Property

Use --mds-price-table-list-separator-color to change the divider between the header and the feature list. Set it on the host element or a parent selector; name a semantic role, rgb(var(--magma-<role>)) (agents/color.md).

.highlight-plan mds-price-table-list {
  --mds-price-table-list-separator-color: rgb(var(--magma-accent-border) / 0.4);
}

Styling via Shadow Parts

Use the documented ::part() targets - header, content, and footer - when you need to override layout that the CSS custom property surface does not cover. Limit part overrides to layout-only changes; do not pierce the shadow DOM via >>> or undocumented class names.

mds-price-table-list::part(footer) {
  gap: calc(var(--spacing) * 300);
}

mds-price-table-list::part(header) {
  padding-bottom: calc(var(--spacing) * 200);
}