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

Single-Plan Card (Mobile Layout)

Use one <mds-price-table> per plan on narrow viewports. Each instance contains one <mds-price-table-list> (the plan card) followed by one <mds-price-table-features> (its feature matrix). The header, price, and action slots of <mds-price-table-list> position plan heading, price, and call-to-action respectively.

<mds-price-table>
  <mds-price-table-list>
    <mds-text typography="h5" tag="h4" slot="header">Piano Base</mds-text>
    <mds-text typography="detail" slot="header">Ideale per liberi professionisti.</mds-text>
    <mds-text typography="h2" tag="h4" slot="price">49 EUR</mds-text>
    <mds-button slot="action" variant="dark">Inizia ora</mds-button>
  </mds-price-table-list>
  <mds-price-table-features>
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
    </mds-price-table-features-row>
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Supporto</mds-price-table-features-cell>
      <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
    </mds-price-table-features-row>
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Report avanzati</mds-price-table-features-cell>
      <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Multi-Plan Comparison (Desktop Layout)

Use a single <mds-price-table> wrapping one <mds-price-table-header> and one shared <mds-price-table-features>. The header holds a heading element plus one <mds-price-table-list> per plan. Each <mds-price-table-features-row> then carries one label cell followed by one data cell per plan - the row component distributes them evenly.

<mds-price-table>
  <mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
    <mds-text typography="h1" tag="h3" class="desktop:py-600">Scegli il tuo piano</mds-text>

    <mds-price-table-list>
      <mds-text typography="h5" tag="h4" slot="header">Base</mds-text>
      <mds-text typography="h2" tag="h4" slot="price">49 EUR</mds-text>
      <mds-button slot="action" variant="dark">Inizia</mds-button>
    </mds-price-table-list>

    <mds-price-table-list class="bg-label-amaranth-10">
      <mds-text typography="h5" tag="h4" slot="header">Professional</mds-text>
      <mds-text typography="h2" tag="h4" slot="price">99 EUR</mds-text>
      <mds-button slot="action" variant="dark">Inizia</mds-button>
    </mds-price-table-list>
  </mds-price-table-header>

  <mds-price-table-features label="Caratteristiche">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">20</mds-price-table-features-cell>
    </mds-price-table-features-row>
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Automazione</mds-price-table-features-cell>
      <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
      <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Feature Matrix Section with a Label

Pass the label prop to <mds-price-table-features> to render a bold section heading above the feature rows. Use this when the comparison is split across multiple thematic groups (for example “Funzionalita base” and “Report e analisi”).

<mds-price-table-features label="Report e analisi">
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Export report</mds-price-table-features-cell>
    <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
    <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  </mds-price-table-features-row>
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Report avanzati</mds-price-table-features-cell>
    <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
    <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  </mds-price-table-features-row>
</mds-price-table-features>

Feature Cell Types

<mds-price-table-features-cell> drives what each matrix cell renders through its type attribute. The five accepted values are: label (plain row heading), text (detail string), supported (check icon), unsupported (dash icon), and custom (arbitrary slotted content).

<mds-price-table-features-row>
  <!-- Row heading - typically the first cell -->
  <mds-price-table-features-cell type="label">Archiviazione</mds-price-table-features-cell>

  <!-- Text value cell -->
  <mds-price-table-features-cell type="text">10 GB</mds-price-table-features-cell>

  <!-- Supported / unsupported icon cells (no slotted content needed) -->
  <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>

  <!-- Custom cell for arbitrary content -->
  <mds-price-table-features-cell type="custom">
    <mds-badge variant="success" tone="weak">Nuovo</mds-badge>
  </mds-price-table-features-cell>
</mds-price-table-features-row>

Contextual Help on a Feature Cell

Slot an <mds-help> inside a label or text cell to add an inline tooltip explaining a feature. Place it directly after the label text so the icon appears inline.

<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">
    Funzionalita automatizzate
    <mds-help>Includono notifiche, workflow e integrazioni API.</mds-help>
  </mds-price-table-features-cell>
  <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
  <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
</mds-price-table-features-row>

List Items Inside a Plan Card

Use <mds-price-table-list-item> for a bulleted feature list inside a plan card: the item assigns itself to the item slot, so it needs no slot attribute. Add the boolean supported attribute for included features and omit it (default false) for excluded ones. The typography prop controls the text size.

<mds-price-table-list>
  <mds-text typography="h5" tag="h4" slot="header">Piano Base</mds-text>
  <mds-text typography="h2" tag="h4" slot="price">49 EUR</mds-text>

  <mds-price-table-list-item supported>Accesso base</mds-price-table-list-item>
  <mds-price-table-list-item supported>Supporto clienti</mds-price-table-list-item>
  <mds-price-table-list-item>Automazione</mds-price-table-list-item>
  <mds-price-table-list-item>Export report</mds-price-table-list-item>

  <mds-button slot="action" variant="dark">Inizia ora</mds-button>
</mds-price-table-list>

Highlighted Plan Card

Apply a Magma label-color utility class directly to <mds-price-table-list> to visually distinguish a recommended or featured plan. Do not set a background color through inline styles or custom CSS; use the documented background tokens.

<mds-price-table>
  <mds-price-table-list>
    <mds-text typography="h5" tag="h4" slot="header">Base</mds-text>
    <mds-text typography="h2" tag="h4" slot="price">49 EUR</mds-text>
    <mds-button slot="action" variant="dark">Inizia</mds-button>
  </mds-price-table-list>

  <!-- Highlighted plan -->
  <mds-price-table-list class="bg-label-amaranth-10">
    <mds-text typography="h5" tag="h4" slot="header">Professional</mds-text>
    <mds-text typography="h2" tag="h4" slot="price">99 EUR</mds-text>
    <mds-button slot="action" variant="dark">Inizia</mds-button>
  </mds-price-table-list>
</mds-price-table>

Separator Color Customization

<mds-price-table-list> exposes one CSS custom property, --mds-price-table-list-separator-color, to style the horizontal rule that separates the header from the item list. Set it on the host, naming a semantic role (agents/color.md).

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