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

Supported / Unsupported Icon Cells

The most common use: a boolean “feature included” or “feature not included” column. Use type="supported" or type="unsupported" and leave the slot empty - the component renders the built-in check-circle or horizontal-rule icon automatically.

<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">Accesso API</mds-price-table-features-cell>
  <mds-price-table-features-cell type="supported"></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>

Label Cell for the Row Feature Name

Place type="label" on the first cell of every row to mark it as the feature descriptor. The slot accepts plain text or a combination of text and a help tooltip component.

<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">
    Larghezza di banda
    <mds-help disable-auto-placement placement="top">
      Calcolata per singolo utente attivo al mese.
    </mds-help>
  </mds-price-table-features-cell>
  <mds-price-table-features-cell>10 GB</mds-price-table-features-cell>
  <mds-price-table-features-cell>50 GB</mds-price-table-features-cell>
  <mds-price-table-features-cell>Illimitata</mds-price-table-features-cell>
</mds-price-table-features-row>

Text Cell for Short Descriptive Values (default)

type="text" (the default) wraps slot content in <mds-text typography="detail">, applying the table’s standard detail typography. Use it for concise values such as storage limits or user counts.

<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">Utenti inclusi</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">25</mds-price-table-features-cell>
  <mds-price-table-features-cell>Illimitati</mds-price-table-features-cell>
</mds-price-table-features-row>

Help Tooltip for an Icon Row

Even when the icon speaks for itself, a help tooltip can add context. A supported / unsupported cell renders only its icon and drops any slotted content, so a tooltip slotted there never shows: put the <mds-help> in the row’s label cell.

<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">
    Supporto dedicato
    <mds-help disable-auto-placement placement="top">
      Disponibile nei giorni feriali dalle 9 alle 18, non incluso nel piano base.
    </mds-help>
  </mds-price-table-features-cell>
  <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
</mds-price-table-features-row>

Custom Cell for Arbitrary Content

Use type="custom" when a plain-text or icon representation is insufficient and you need full control of the cell’s content - for example a badge, a rating widget, or a formatted value with a unit.

<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">Assistenza clienti</mds-price-table-features-cell>
  <mds-price-table-features-cell type="custom">
    <mds-chip label="E-mail" variant="info" tone="weak"></mds-chip>
  </mds-price-table-features-cell>
  <mds-price-table-features-cell type="custom">
    <mds-chip label="Chat live" variant="success" tone="weak"></mds-chip>
  </mds-price-table-features-cell>
  <mds-price-table-features-cell type="custom">
    <mds-chip label="Telefono 24/7" variant="primary" tone="strong"></mds-chip>
  </mds-price-table-features-cell>
</mds-price-table-features-row>

Full Composition Inside the Price Table

Cells must always be children of <mds-price-table-features-row>, which in turn lives inside <mds-price-table-features> and <mds-price-table>. Do not use the cell outside this hierarchy.

<mds-price-table>
  <mds-price-table-features label="Funzionalita incluse">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Backup automatico</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">Spazio di archiviazione</mds-price-table-features-cell>
      <mds-price-table-features-cell>5 GB</mds-price-table-features-cell>
      <mds-price-table-features-cell>20 GB</mds-price-table-features-cell>
      <mds-price-table-features-cell>Illimitato</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Styling Customization

Style the cell only through its documented --mds-price-table-features-cell-* CSS custom properties. Set them on the host or a parent selector; name a semantic role, rgb(var(--magma-<role>)) (agents/color.md), so dark mode and high-contrast modes keep working (the green of the supported icon is the categorical label-green palette, as in the component’s own default).

mds-price-table-features-cell {
  --mds-price-table-features-cell-padding: calc(var(--spacing) * 400);
  --mds-price-table-features-cell-border-color: rgb(var(--magma-border-default));
  --mds-price-table-features-cell-icon-supported-color: rgb(var(--label-green-07));
  --mds-price-table-features-cell-icon-supported-color-hover: rgb(var(--label-green-08));
  --mds-price-table-features-cell-icon-unsupported-color: rgb(var(--magma-text-subtle));
  --mds-price-table-features-cell-icon-unsupported-color-hover: rgb(var(--magma-text-disabled));
}