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

Basic Card with Content

The most common use: a card with only a content region. Place <mds-card-content> as a direct child of <mds-card> - no slot attribute needed, the component self-assigns to the parent’s content region.

<mds-card>
  <mds-card-content>
    <mds-text typography="label">Comune di Roma</mds-text>
    <mds-text typography="paragraph">Aggiornato il 5 giugno 2026</mds-text>
  </mds-card-content>
</mds-card>

Full Card Composition

Use <mds-card-content> alongside <mds-card-header>, <mds-card-media>, and <mds-card-footer> to build a complete card. The parent arranges them in a responsive grid automatically by default (unless disable-auto-grid is set on the parent).

<mds-card>
  <mds-card-media>
    <mds-img src="copertina.jpg" alt="Immagine documento"></mds-img>
  </mds-card-media>
  <mds-card-header>
    <mds-text typography="h6">Delibera n. 42</mds-text>
  </mds-card-header>
  <mds-card-content>
    <mds-text typography="paragraph">
      Approvazione del piano triennale delle opere pubbliche per il periodo 2026-2028.
    </mds-text>
  </mds-card-content>
  <mds-card-footer>
    <mds-button label="Scarica PDF" icon="mi/baseline/download" variant="primary"></mds-button>
  </mds-card-footer>
</mds-card>

Mixed Rich Content

The default slot accepts any HTML or components. Use it for structured content like lists, banners, or data visualizations that make up the card body.

<mds-card>
  <mds-card-header>
    <mds-text typography="h6">Riepilogo pratiche</mds-text>
  </mds-card-header>
  <mds-card-content>
    <mds-banner variant="warning" tone="weak">3 pratiche in scadenza oggi</mds-banner>
    <mds-list>
      <mds-list-item>Pratica SUAP 2026-001</mds-list-item>
      <mds-list-item>Pratica SUAP 2026-002</mds-list-item>
      <mds-list-item>Pratica SUAP 2026-003</mds-list-item>
    </mds-list>
  </mds-card-content>
</mds-card>

Content-Only Card Without a Header

Omitting sibling regions is valid. A card holding only <mds-card-content> renders the content at full height in the grid’s single-column layout. This is common for KPI panels or compact info tiles.

<mds-card>
  <mds-card-content>
    <mds-kpi>
      <mds-kpi-item label="142" description="Pratiche aperte"></mds-kpi-item>
    </mds-kpi>
  </mds-card-content>
</mds-card>

Adjusting Card Spacing via Parent Custom Properties

<mds-card-content> has no CSS custom properties of its own. Control the spacing of the card composition through the parent’s --mds-card-gap (between the regions) and --mds-card-padding (around them) properties; the content region’s own inner padding and gap are fixed. Set them on the <mds-card> host or on a parent selector.

.card-compatta mds-card {
  --mds-card-gap: calc(var(--spacing) * 200);
  --mds-card-padding: calc(var(--spacing) * 300);
}