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

Default Chip - Inline Disclosure Next to Generated Text

The default form. Drop the component directly after AI-generated content with no additional attributes. The built-in “Generato con MIA” chip appears with a hover dropdown linking to the policy page.

<mds-text typography="paragraph">
  Il presente estratto e' stato generato automaticamente dall'intelligenza artificiale MIA.
</mds-text>
<mds-policy-ai></mds-policy-ai>

Explicit Chip Variant

Declare variant="chip" explicitly when component selection is driven by configuration or template logic. Behavior is identical to the default.

<mds-policy-ai variant="chip"></mds-policy-ai>

Custom Headline and Description on the Chip

Override the localized defaults with headline and description when the tenant’s disclosure copy differs from the built-in MIA text. Both attributes reflect on the host element and are safe to drive from CSS attribute selectors.

<mds-policy-ai
  variant="chip"
  headline="Estratto generato con AI"
  description="L'estratto che stai leggendo e' stato generato tramite i nostri servizi di intelligenza artificiale e potrebbe contenere inesattezze."
></mds-policy-ai>

Icon Variant - Space-Constrained Placement

Use variant="icon" when available space is too narrow for a chip - for example, overlaid on a thumbnail image. The icon opens the policy URL in a new tab on click and shows a tooltip with the disclosure text on hover.

<div class="relative">
  <mds-policy-ai variant="icon" class="absolute bottom-200 right-200 z-10"></mds-policy-ai>
  <mds-img src="./copertina-documento.webp" class="rounded-(--magma-radius-md) shadow-sm"></mds-img>
</div>

Card Variant - Sidebar or Standalone Block

Use variant="card" when the disclosure needs more visual weight than a chip but is not a page-level notice. A compact card renders the disclaimer text and a policy button. Supply description to replace the default body copy.

<mds-policy-ai
  variant="card"
  description="Le FAQ che stai leggendo sono generate tramite i nostri servizi di intelligenza artificiale e potrebbero contenere inesattezze."
></mds-policy-ai>

Banner Variant - Page-Level Notice

Use variant="banner" at the top or bottom of AI-heavy pages where a prominent notice is required. The banner renders a full-width tile with headline, description, and a policy action button. Override both props to match the page context.

<mds-policy-ai
  variant="banner"
  headline="Contenuto generato con intelligenza artificiale"
  description="Questo testo e' stato generato automaticamente tramite MIA e potrebbe contenere inesattezze. Ti invitiamo a verificarne l'accuratezza e a consultare fonti ufficiali."
></mds-policy-ai>

Custom Policy URL via href

The default href points to the Maggioli EU AI-regulation article. Override it to link to a tenant-specific policy page. All four variants route the user to the same href.

<mds-policy-ai
  variant="banner"
  href="https://example.com/informativa-intelligenza-artificiale"
></mds-policy-ai>

Styling via Shadow Parts

Each variant exposes one named ::part(): icon and banner are the inner mds-help and mds-banner elements, so their documented CSS custom properties can be set there; card is the card container and chip the wrapper around the chip and its dropdown. Use these only for a deep customization.

/* Increase the border radius of the card surface */
mds-policy-ai::part(card) {
  border-radius: var(--magma-radius-xl);
}

/* Stronger tint for the banner cockade (the ring around the icon) */
mds-policy-ai::part(banner) {
  --mds-banner-cockade-background: rgb(var(--magma-accent-ai-surface));
}