# Media

Two parts fill the space a card leaves for a picture. `Media` draws artwork
when there is no real image to show, and `MediaEmbed` stands in for a hosted
video until the visitor asks for it.

## Generative artwork

Generative artwork for a card with no real image. The accent is a CSS custom
property rather than a prop, so the component never learns a product or brand
name. Every form of the color field is derived from that one accent, so the
accent you pass sets the whole surface:

```astro
<Media treatment="color-field" style="--accent: var(--helia-accent-cyan)" />
```

Color field · one accent, four forms

Graphite · conceptual systems

Slate · architecture and tooling

Wire · data flows and connections

The artwork carries no information, so it is hidden from assistive technology.
Where a caption is needed, wrap it in a `<figure>` as above.

## Hosted video

Use a poster-first embed for externally hosted video. The third-party player is
not requested until the visitor presses play, which keeps the initial page
weight and the provider's requests out of the critical path. Always give the
embed a useful title and an external fallback link.

The embed knows nothing about what it is showing. The poster, the caption and
the duration are props, so the part never reaches for a demo or a product to
describe itself.