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

Standard Three-Plan Header

The most common form: a leading title column followed by one <mds-price-table-list> per plan. Apply responsive grid-column utilities directly on the host to align the header with the feature rows below it.

<mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
  <mds-text typography="h1" class="tablet:col-span-3 desktop:col-span-1 desktop:py-600">
    Scegli il piano per te
  </mds-text>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Piano Base</mds-text>
    <mds-text typography="detail" slot="header">
      Ideale per liberi professionisti.
    </mds-text>
    <mds-text typography="h2" slot="price">49 EUR / mese</mds-text>
    <mds-button slot="action" variant="dark">Inizia ora</mds-button>
  </mds-price-table-list>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Piano Professional</mds-text>
    <mds-text typography="detail" slot="header">
      Per studi di medie dimensioni.
    </mds-text>
    <mds-text typography="h2" slot="price">99 EUR / mese</mds-text>
    <mds-button slot="action" variant="dark">Inizia ora</mds-button>
  </mds-price-table-list>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Piano Enterprise</mds-text>
    <mds-text typography="detail" slot="header">
      Soluzioni su misura per grandi organizzazioni.
    </mds-text>
    <mds-text typography="h2" slot="price">149 EUR / mese</mds-text>
    <mds-button slot="action" variant="dark">Inizia ora</mds-button>
  </mds-price-table-list>
</mds-price-table-header>

Header Without a Leading Title Column

When the layout does not need a title column on the left, omit the leading element and let the auto-fit grid divide space equally among the plan columns. Update the grid-column count to match the number of plans.

<mds-price-table-header class="tablet:grid-cols-2 desktop:grid-cols-3">
  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Starter</mds-text>
    <mds-text typography="h2" slot="price">Gratuito</mds-text>
    <mds-button slot="action" variant="primary" tone="strong">Registrati</mds-button>
  </mds-price-table-list>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Business</mds-text>
    <mds-text typography="h2" slot="price">79 EUR / mese</mds-text>
    <mds-button slot="action" variant="primary" tone="strong">Abbonati</mds-button>
  </mds-price-table-list>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Enterprise</mds-text>
    <mds-text typography="h2" slot="price">Su richiesta</mds-text>
    <mds-button slot="action" variant="dark">Contattaci</mds-button>
  </mds-price-table-list>
</mds-price-table-header>

Highlighted Plan Column

Apply a background utility class directly to an <mds-price-table-list> child to visually emphasize a recommended plan. No extra wrapper is needed.

<mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
  <mds-text typography="h1" class="tablet:col-span-3 desktop:col-span-1">
    Trova il piano giusto
  </mds-text>

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

  <!-- Recommended plan - highlighted via background utility -->
  <mds-price-table-list class="bg-label-amaranth-10">
    <mds-text typography="h5" slot="header">Consigliato</mds-text>
    <mds-text typography="h2" slot="price">69 EUR / mese</mds-text>
    <mds-button slot="action" variant="primary" tone="strong">Inizia</mds-button>
  </mds-price-table-list>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Premium</mds-text>
    <mds-text typography="h2" slot="price">129 EUR / mese</mds-text>
    <mds-button slot="action" variant="dark">Inizia</mds-button>
  </mds-price-table-list>
</mds-price-table-header>

Matching Column Count to Feature Rows

When combined with <mds-price-table-features> below the header, give every feature row as many cells as the header has columns (one label cell for the title column, then one cell per plan): each row divides its width equally among its cells. Grid-column classes have no effect on <mds-price-table-features>, which renders a table.

<mds-price-table>
  <mds-price-table-header class="tablet:grid-cols-3 desktop:grid-cols-4">
    <mds-text typography="h1" class="tablet:col-span-3 desktop:col-span-1">
      Prezzi e funzionalita
    </mds-text>
    <mds-price-table-list>
      <mds-text typography="h5" slot="header">Base</mds-text>
      <mds-text typography="h2" slot="price">49 EUR</mds-text>
      <mds-button slot="action" variant="dark">Abbonati</mds-button>
    </mds-price-table-list>
    <mds-price-table-list>
      <mds-text typography="h5" slot="header">Pro</mds-text>
      <mds-text typography="h2" slot="price">99 EUR</mds-text>
      <mds-button slot="action" variant="dark">Abbonati</mds-button>
    </mds-price-table-list>
    <mds-price-table-list>
      <mds-text typography="h5" slot="header">Enterprise</mds-text>
      <mds-text typography="h2" slot="price">199 EUR</mds-text>
      <mds-button slot="action" variant="dark">Contattaci</mds-button>
    </mds-price-table-list>
  </mds-price-table-header>

  <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">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>

Mobile Collapse with Responsive Classes

On narrow viewports, collapse the multi-column header into a single-column stack using a max-mobile:grid-cols-1 utility. The leading title then occupies the full row before the plan cards.

<mds-price-table-header
  class="max-mobile:grid-cols-1 tablet:grid-cols-3 desktop:grid-cols-4"
>
  <mds-text typography="h1" class="tablet:col-span-3 desktop:col-span-1">
    Confronta i piani
  </mds-text>

  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Individuale</mds-text>
    <mds-text typography="h2" slot="price">19 EUR / mese</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">Team</mds-text>
    <mds-text typography="h2" slot="price">49 EUR / mese</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">Azienda</mds-text>
    <mds-text typography="h2" slot="price">149 EUR / mese</mds-text>
    <mds-button slot="action" variant="dark">Scegli</mds-button>
  </mds-price-table-list>
</mds-price-table-header>