PATTERN 02 / 04 Article 50(4)
AI Content Label
Mark AI-generated or AI-manipulated content — including deepfakes — as artificial, in a way both people and machines can detect. Article 50(4) has no transition period for new content, which makes this the most time-sensitive pattern in the kit.
01 / 04
Playground
Pick a status, media type, and placement. The machine-readable markup updates with it.
Preview
Controls
Status
Media type
Placement
Machine-readable
<figure data-ai-content="ai-generated" data-ai-media="image"> … <figcaption><!-- AIContentLabel --></figcaption> </figure>
02 / 04
Usage
import AIContentLabel from './kit/AIContentLabel';
// Caption under a generated image
<figure>
<img src={url} alt="…" />
<figcaption>
<AIContentLabel status="ai-generated" mediaType="image" />
</figcaption>
</figure>
// Overlay badge on a deepfake video
<AIContentLabel status="ai-edited" mediaType="video" variant="overlay" /> 03 / 04
Props
| Prop | Type | Notes |
|---|---|---|
| status | 'ai-generated' | 'ai-assisted' | 'ai-edited' | What was done. Default ai-generated. |
| mediaType | 'image' | 'video' | 'audio' | 'text' | Drives the icon and machine-readable attribute. |
| variant | 'overlay' | 'caption' | Overlay sits on the media; caption sits beside it. |
| detail | string | Optional extra, e.g. the tool or model used. |
04 / 04
Accessibility & detectability
- Visible label a person can read, plus an
aria-labelwith the full sentence for screen readers. - Machine-readable via
data-ai-contentanddata-ai-mediaattributes other software can detect. - The overlay variant sits on an ink scrim at 85% opacity to keep text contrast at AA over any image.
- Pair it with your provenance signal (e.g. C2PA / watermarking) — the label is the human-facing half.