Common incorrect uses of <mds-card-footer>. 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-footer> Outside <mds-card>

<mds-card-footer> self-routes to the footer slot of <mds-card> via <Host slot="footer">. Outside a card it renders as a bare flex row with no visual context and communicates nothing to screen readers.

<!-- INCORRECT -->
<mds-card-footer>
  <mds-button label="Conferma" variant="primary"></mds-button>
</mds-card-footer>

<!-- CORRECT -->
<mds-card>
  <mds-card-footer>
    <mds-button label="Conferma" variant="primary" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>

Do Not Assign slot="footer" on <mds-card-footer> Manually

<mds-card-footer> already sets slot="footer" on its host via its own render output. Adding it again as an attribute in your markup is redundant: the component writes it itself, overwriting any other value when it renders.

<!-- INCORRECT -->
<mds-card>
  <mds-card-footer slot="footer">
    <mds-button label="Salva" variant="primary"></mds-button>
  </mds-card-footer>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-footer>
    <mds-button label="Salva" variant="primary" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>

Do Not Nest <mds-card-footer> Inside a Wrapper Element

Compound component children must be direct slot children of the parent - <mds-card> has no default slot, so a <div> wrapper without a slot is not rendered at all, and the <mds-card-footer> inside it with it.

<!-- INCORRECT -->
<mds-card>
  <div class="azioni">
    <mds-card-footer>
      <mds-button label="Annulla" variant="dark"></mds-button>
    </mds-card-footer>
  </div>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-footer>
    <mds-button label="Annulla" variant="dark" tone="outline"></mds-button>
  </mds-card-footer>
</mds-card>

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

<mds-card> maps all children with the footer tag to the same grid area; multiple footers stack or overlap unpredictably. Consolidate all footer content into a single <mds-card-footer>.

<!-- INCORRECT -->
<mds-card>
  <mds-card-footer>
    <mds-button label="Annulla" variant="dark"></mds-button>
  </mds-card-footer>
  <mds-card-footer>
    <mds-button label="Conferma" variant="primary"></mds-button>
  </mds-card-footer>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-footer>
    <mds-button label="Annulla" variant="dark" tone="outline"></mds-button>
    <mds-button label="Conferma" variant="primary" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>

Do Not Override Footer Layout via Inline Styles or Undocumented Selectors

<mds-card-footer> owns its internal flex layout (alignment, gap, padding). Overriding it with inline style or by targeting shadow internals breaks theme consistency and couples code to implementation details. If the parent card’s spacing must change, use <mds-card>’s documented --mds-card-gap and --mds-card-padding custom properties on the card host.

<!-- INCORRECT -->
<mds-card-footer style="justify-content: flex-start; padding: 0;">
  <mds-button label="Salva" variant="primary"></mds-button>
</mds-card-footer>

<!-- CORRECT -->
<mds-card style="--mds-card-padding: calc(var(--spacing) * 400);">
  <mds-card-footer>
    <mds-button label="Salva" variant="primary" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>