Examples

ContentImage usage

This page exercises both the design-system atom and the Payload-aware helper so you can reference a working example when wiring up real data.

1. Direct @afo/ui usage

Provide responsive URLs for the breakpoints you need (the platform provider upgrades the rendering to Next Image automatically inside the frontend layout).

Ignite glyph

2. Feeding ContentImage from Payload

This example reads the images collection (see apps/web/src/payload/collections/media/images/collection.ts) and maps its responsive derivatives into the ContentImage atom the same way your features should.

Run pnpm web:db:seed to populate the demo asset used here.

Tailwind utilities active (bg-brand available via @theme).