← All Visual Examples
desktop1440×1000 · 
sidebar-desktop1440×1000 · 
mobile390×844 ·
draft · tabs-creative-range-demonstration
Tabs Creative Range Demonstration
Show three accessible Tabs directions from typed Hugo source: editorial underline, compact pills, and a guided desktop sidebar.
- Evidence
- demonstration
- Release binding
- unbound
- Core source
dde7da9a7964
Full-size artifacts
Rendered evidence
3 declared viewports. Select an image to inspect it at source resolution.
/tabs-directions/fixtures/compatibility/customer-brand-range-proof/evidence/tabs-creative-range-desktop.png/tabs-directions/fixtures/compatibility/customer-brand-range-proof/evidence/tabs-sidebar-desktop.png/tabs-directions/fixtures/compatibility/customer-brand-range-proof/evidence/tabs-creative-range-mobile.pngIntent
Exact declaration
Subjects
Best fit
- choosing tab presentation by content depth
- reviewing keyboard and responsive behavior
- learning no-JavaScript-safe tab source
Avoid when
- panels must remain visible for comparison
- the content is sequential
- dozens of hidden views would make navigation harder
Readiness
Checks and limitations
- accessibility
- partial
- artifact freshness
- not-run
- desktop responsive
- pass
- keyboard
- partial
- mobile responsive
- pass
- no essential javascript
- partial
- performance
- not-run
- reduced motion
- not-run
- rendered route
- pass
- source portability
- pass
- visual acceptance
- not-run
Limitations
- This is source-linked development evidence, not an exact clean release binding.
- Chromium layout, viewport containment, vertical ArrowDown activation, visible focus, and console behavior pass; the keyboard state remains partial until recorded by the formal audit, and axe-core, JavaScript-disabled capture, performance budgets, Safari, and independent owner review remain promotion gates.
Invalidated by
- Tabs renderer, semantic CSS, or controller change
- preset or fixture source change
- Customer Brand System 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 |
|---|---|---|
/tabs-directions/ | three-direction Tabs comparison | fixtures/compatibility/customer-brand-range-proof/content/tabs-directions/_index.md |
Source mapping
| Role | Path | Use |
|---|---|---|
| copyable Tabs typed Hugo source | fixtures/compatibility/customer-brand-range-proof/content/tabs-directions/_index.md | Copyable source |
| portable Tabs renderer | layouts/partials/blocks/tabs.html | Framework or evidence source |
| portable Tabs semantic CSS | assets/css/foundry-base.css | Framework or evidence source |
| accessible Tabs controller | assets/js/foundry-tabs.js | Framework or evidence source |
| render and browser assertions | fixtures/compatibility/customer-brand-range-proof/fixture.config.json | Framework or evidence source |