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

Standard Feature Row with Supported / Unsupported Cells

The most common pattern: one label cell followed by one boolean cell per plan column. Use type="label" for the feature name and type="supported" or type="unsupported" for each plan’s availability. The row distributes the cells equally across the available width automatically.

<mds-price-table>
  <mds-price-table-features label="Funzionalita' incluse">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Supporto clienti</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="unsupported"></mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Feature Row with Text Values

When a feature has a measurable limit rather than a simple yes/no, use type="text" cells to display the value as a formatted string. The cell wraps the text in <mds-text typography="detail"> automatically.

<mds-price-table>
  <mds-price-table-features label="Limiti di utilizzo">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti massimi</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-row>
      <mds-price-table-features-cell type="label">Spazio di archiviazione</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">5 GB</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">50 GB</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">1 TB</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Mixed Row with Text and Boolean Cells

A single row can mix type="text", type="supported", and type="unsupported" cells when some plans have a value and others have a boolean flag. All cells still receive equal widths.

<mds-price-table>
  <mds-price-table-features label="Reportistica">
    <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="text">Solo esportazione</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>

Custom Cell Content with type="custom"

Use type="custom" when none of the standard cell types is adequate - for example to embed a component or styled content. The cell renders its default slot as-is without any wrapping element.

<mds-price-table>
  <mds-price-table-features label="Assistenza">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Canale di supporto</mds-price-table-features-cell>
      <mds-price-table-features-cell type="custom">
        <mds-badge variant="info" tone="weak">Email</mds-badge>
      </mds-price-table-features-cell>
      <mds-price-table-features-cell type="custom">
        <mds-badge variant="success" tone="weak">Chat</mds-badge>
      </mds-price-table-features-cell>
      <mds-price-table-features-cell type="custom">
        <mds-badge variant="dark" tone="strong">Dedicato</mds-badge>
      </mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Text Cell with Inline Help Tooltip

A type="text" cell accepts arbitrary HTML in its slot, so you can pair the value with an <mds-help> component when additional context is needed.

<mds-price-table>
  <mds-price-table-features label="Archiviazione">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Capacita' massima</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">5 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 disable-auto-placement placement="top">
          La capacita' puo' 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>

Styling Customization

Override the row’s background and text colors for resting and hover states through the documented --mds-price-table-features-row-* CSS custom properties. Always 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-row {
  --mds-price-table-features-row-background: rgb(var(--magma-surface-muted));
  --mds-price-table-features-row-background-hover: rgb(var(--magma-wash-base));
  --mds-price-table-features-row-color: rgb(var(--magma-text-muted));
  --mds-price-table-features-row-color-hover: rgb(var(--magma-text-default));
}