Common incorrect uses of <mds-card>. 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 Put Content Outside the Four Named Slots

<mds-card> has no default (unnamed) slot. Loose text or elements placed without a recognized slot attribute - or without using an mds-card-* compound child - are silently ignored and never rendered.

<!-- INCORRECT -->
<mds-card>
  <p>Questo testo non verra' mai visualizzato.</p>
  <mds-button label="Azione"></mds-button>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-content>
    <mds-text>Questo testo e' correttamente posizionato nel content slot.</mds-text>
  </mds-card-content>
  <mds-card-footer>
    <mds-button label="Azione" variant="primary"></mds-button>
  </mds-card-footer>
</mds-card>

Do Not Use mds-card-* Children Outside <mds-card>

Compound children (mds-card-header, mds-card-media, mds-card-content, mds-card-footer) rely on <mds-card> for layout context. Used standalone they render without the managed grid and without the card’s visual chrome.

<!-- INCORRECT -->
<div class="mia-sezione">
  <mds-card-header>
    <mds-text typography="h6">Titolo standalone</mds-text>
  </mds-card-header>
</div>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h6">Titolo nella scheda</mds-text>
  </mds-card-header>
</mds-card>

Do Not Pierce the Shadow DOM with Undocumented Selectors

The only supported customization surface is --mds-card-gap, --mds-card-padding, and ::part(layout). Targeting internal class names with >>>, /deep/, or any selector that reaches inside the shadow root couples your code to implementation details and will break on minor releases.

/* INCORRECT */
mds-card >>> .layout {
  padding: 16px;
}
mds-card .layout--cfhm {
  grid-template-columns: 1fr 1fr;
}

/* CORRECT */
mds-card {
  --mds-card-padding: calc(var(--spacing) * 400);
}
mds-card::part(layout) {
  border-radius: var(--magma-radius-xl);
}

Do Not Assign an Explicit slot Attribute to mds-card-* Children

mds-card-header, mds-card-media, mds-card-content, and mds-card-footer already set their own slot attribute on the host element from inside the component. Adding it again from the outside is redundant and may conflict with internal wiring.

<!-- INCORRECT -->
<mds-card>
  <mds-card-header slot="header">...</mds-card-header>
  <mds-card-content slot="content">...</mds-card-content>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>...</mds-card-header>
  <mds-card-content>...</mds-card-content>
</mds-card>

Do Not Put Media Elements Directly in the header Slot

The header slot is intended for title and action controls. Placing an <mds-img> or <img> directly there bypasses the media region’s responsive two-column behavior. Use the media slot (or <mds-card-media>) for images and videos.

<!-- INCORRECT -->
<mds-card>
  <mds-card-header>
    <mds-img src="/immagini/banner.jpg"></mds-img>
  </mds-card-header>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-media>
    <mds-img src="/immagini/banner.jpg" class="object-cover"></mds-img>
  </mds-card-media>
  <mds-card-header>
    <mds-text typography="h6">Titolo della scheda</mds-text>
  </mds-card-header>
</mds-card>

Do Not Override Card Dimensions with Inline Styles

<mds-card> manages its own min-height and responsive grid. A fixed height clips the regions (the card hides its overflow), and a fixed width pins the container-query layout instead of letting it follow the space its container gives.

<!-- INCORRECT -->
<mds-card style="width: 300px; height: 200px;">
  ...
</mds-card>

<!-- CORRECT: size the card from a parent container or CSS custom properties -->
<div class="w-[300px]">
  <mds-card>
    ...
  </mds-card>
</div>