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

Basic Feature Matrix

The minimal form: place <mds-price-table-features> inside <mds-price-table> and slot <mds-price-table-features-row> children. Each row holds one <mds-price-table-features-cell> per plan column. The first cell of every row conventionally uses type="label" to identify the feature.

<mds-price-table>
  <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-cell type="text">50</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">Illimitati</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Named Section with label

Set the label prop to render a header band above the matrix. Use this to name a logical group of features - for example “Report e analisi” or “Sicurezza”. Omit label when no group heading is needed.

<mds-price-table>
  <mds-price-table-features label="Report e analisi">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Esporta 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-cell type="supported"></mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Supported and Unsupported Cells

Use type="supported" and type="unsupported" for boolean feature availability. The cell renders a built-in icon - no slot content is needed (and any content is ignored).

<mds-price-table>
  <mds-price-table-features label="Funzionalita' avanzate">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Autenticazione SSO</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-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">Notifiche email</mds-price-table-features-cell>
      <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
      <mds-price-table-features-cell type="supported"></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>

Text Cells with Contextual Help

Use type="text" to display a value string. Mix inline components such as <mds-help> inside the cell slot for additional context.

<mds-price-table>
  <mds-price-table-features label="Archiviazione">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Spazio incluso</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10 GB</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">100 GB</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">
        1 TB
        <mds-help placement="top">Può variare in base allo stato del server.</mds-help>
      </mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Custom Cell Content via type="custom"

Use type="custom" when none of the standard rendering modes fits. The slot is rendered without wrapping markup, giving full control over layout and content.

<mds-price-table>
  <mds-price-table-features label="Componenti aggiuntivi">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Integrazioni API</mds-price-table-features-cell>
      <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
      <mds-price-table-features-cell type="custom">
        <mds-badge label="Su richiesta" variant="info"></mds-badge>
      </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>

Multiple Feature Sections in One Price Table

Compose several <mds-price-table-features> blocks inside one <mds-price-table> to separate logical feature groups. Each block carries its own optional label heading.

<mds-price-table>
  <mds-price-table-features label="Funzioni di base">
    <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">5</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">20</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">Illimitati</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>

  <mds-price-table-features label="Report e analisi">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Dashboard</mds-price-table-features-cell>
      <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
      <mds-price-table-features-cell type="supported"></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="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>

Styling Customization

Tune the header band’s divider and the cell spacing through the documented CSS custom properties. Set them on the host or on a parent selector; name a semantic role, rgb(var(--magma-<role>)) (agents/color.md), so dark mode and high-contrast modes keep working.

.pricing-section mds-price-table-features {
  --mds-price-table-features-border-color: rgb(var(--magma-accent-border));
  --mds-price-table-features-padding: calc(var(--spacing) * 400);
}

To style the header band independently, target the documented header shadow part:

.pricing-section mds-price-table-features::part(header) {
  background: rgb(var(--magma-wash-base));
}