Common incorrect uses of <mds-card-content>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use <mds-card-content> Outside <mds-card>

<mds-card-content> is a compound child and relies on <mds-card>’s slot infrastructure and grid layout. Used standalone it renders with no container context and produces unpredictable visual output.

<!-- INCORRECT -->
<mds-card-content>
  <mds-text typography="paragraph">Testo senza contesto.</mds-text>
</mds-card-content>

<!-- CORRECT -->
<mds-card>
  <mds-card-content>
    <mds-text typography="paragraph">Testo senza contesto.</mds-text>
  </mds-card-content>
</mds-card>

Do Not Set the slot Attribute Manually

<mds-card-content> self-assigns slot="content" in its Host render. Adding the attribute externally is redundant: the component writes it itself, overwriting any other value when it renders.

<!-- INCORRECT -->
<mds-card>
  <mds-card-content slot="content">
    <mds-text typography="paragraph">Intestazione sezione principale.</mds-text>
  </mds-card-content>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-content>
    <mds-text typography="paragraph">Intestazione sezione principale.</mds-text>
  </mds-card-content>
</mds-card>

Do Not Replace <mds-card-content> with a Raw <div slot="content">

A raw element placed directly in slot="content" bypasses the card-content component’s internal grid and consistent padding, and the card, which infers its grid from the tag names of its children, does not recognise it as the content region: the managed layout breaks.

<!-- INCORRECT -->
<mds-card>
  <div slot="content" style="padding: 16px;">
    <p>Descrizione pratica edilizia.</p>
  </div>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-content>
    <mds-text typography="paragraph">Descrizione pratica edilizia.</mds-text>
  </mds-card-content>
</mds-card>

Do Not Try to Style Spacing via <mds-card-content> CSS Vars

<mds-card-content> exposes no --mds-card-content-* custom properties. Setting them has no effect: its inner padding and gap are fixed. The spacing you can set is the card’s, through --mds-card-gap (between the regions) and --mds-card-padding (around them) on the parent <mds-card>.

/* INCORRECT - has no effect */
mds-card-content {
  --mds-card-content-padding: calc(var(--spacing) * 600);
  --mds-card-content-gap: calc(var(--spacing) * 400);
}

/* CORRECT - set on the parent card host */
mds-card {
  --mds-card-gap: calc(var(--spacing) * 200);
  --mds-card-padding: calc(var(--spacing) * 400);
}

Do Not Place Multiple <mds-card-content> Elements in One Card

Only one content region per card is supported. Multiple instances produce overlapping slot assignments and unpredictable grid output; consolidate all body content inside a single <mds-card-content>.

<!-- INCORRECT -->
<mds-card>
  <mds-card-content>
    <mds-text typography="label">Sezione A</mds-text>
  </mds-card-content>
  <mds-card-content>
    <mds-text typography="label">Sezione B</mds-text>
  </mds-card-content>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-content>
    <mds-text typography="label">Sezione A</mds-text>
    <mds-text typography="label">Sezione B</mds-text>
  </mds-card-content>
</mds-card>