← All Visual Examples
desktop1440×1100 · 
mobile390×844 ·
draft · callout-creative-range-demonstration
Callout Creative Range Demonstration
Show useful context, a genuine page-wide alert, and a quiet editorial aside from one concise portable Callout contract.
- Evidence
- demonstration
- Release binding
- unbound
- Core source
dde7da9a7964
Full-size artifacts
Rendered evidence
2 declared viewports. Select an image to inspect it at source resolution.
/callout-directions/fixtures/compatibility/portable-block-layout-proof/evidence/callout-directions-desktop.png/callout-directions/fixtures/compatibility/portable-block-layout-proof/evidence/callout-directions-mobile.pngIntent
Exact declaration
Subjects
Best fit
- adding context that changes how nearby content is understood
- making a real operational warning visible
- separating an editorial distinction from the main reading flow
Avoid when
- ordinary marketing copy merely needs more visual emphasis
- the message needs several actions or a complete conversion surface
- dynamic application status requires a live alert region
Readiness
Checks and limitations
- accessibility
- partial
- artifact freshness
- not-run
- desktop responsive
- pass
- keyboard
- partial
- mobile responsive
- pass
- no essential javascript
- pass
- performance
- not-run
- reduced motion
- pass
- rendered route
- pass
- source portability
- pass
- visual acceptance
- not-run
Limitations
- This is source-linked development evidence, not an exact clean release binding.
- Chromium desktop and 390px layout, deliberate contained/wide/editorial measures, zero overflow, visible semantic labels, touch-sized actions, focus visibility, reduced-motion CSS, and visual review pass. Axe-core, performance, Safari viewport proof, exact release binding, independent owner review, and measured human/AI authoring tasks remain promotion gates.
Invalidated by
- Callout renderer or semantic CSS change
- preset or fixture source change
- Customer Brand System or accessibility contract change
- Core or Distribution release change
- browser evidence change
Portable source
Routes and source ownership
Paths resolve inside exact Core commit dde7da9a7964f8011ecac5cb311f6d5ae2872b46. Private repository links stay private; the mapping remains explicit.
Rendered routes
| Route | Role | Source |
|---|---|---|
/callout-directions/ | three-direction canonical Callout comparison | fixtures/compatibility/portable-block-layout-proof/content/callout-directions/_index.md |
Source mapping
| Role | Path | Use |
|---|---|---|
| copyable typed Hugo source | fixtures/compatibility/portable-block-layout-proof/content/callout-directions/_index.md | Copyable source |
| portable named preset registry | data/foundry/block-presets.yaml | Framework or evidence source |
| portable Callout renderer | layouts/partials/blocks/callout.html | Framework or evidence source |
| portable Callout semantic CSS | assets/css/foundry-base.css | Framework or evidence source |
| render and browser assertions | fixtures/compatibility/portable-block-layout-proof/fixture.config.json | Framework or evidence source |