---
title: Relay / workflow demonstration Detail
description: Lead with a concrete workflow surface, then explain its state transitions; the interior is a guided demonstration.
---
<study-relay-workflow><nav aria-label="Main"><a href="/">Relay</a><a href="/detail">Workflow</a><a href="mailto:relay@example.test">Questions</a></nav><div class="walkthrough"><aside><p>Workflow / demonstration</p><h1>Make the handover<br>readable.</h1><p>Open each state to inspect the relationship between material and next action.</p></aside><section class="states"><details open><summary>01 / Collect</summary><p>The outline gathers the material for a shared review. State: Collected.</p></details><details><summary>02 / Review</summary><p>The review puts the gathered material in context. State: Ready.</p></details><details><summary>03 / Handover</summary><p>The next state identifies a handover after review. State: Next.</p></details><p>These disclosures demonstrate a sequence; they do not change a live project.</p></section></div><div class="workspace"><aside><strong>STUDIO / SAMPLE</strong><p>One handover</p><a href="/detail">Inspect this workflow →</a></aside><section><h2>Handover board</h2><table><caption>Illustrative records; no live data</caption><thead><tr><th scope="col">Item</th><th scope="col">State</th></tr></thead><tbody><tr><td>Outline</td><td>Collected</td></tr><tr><td>Review</td><td>Ready</td></tr><tr><td>Handover</td><td>Next</td></tr></tbody></table></section></div><section class="explanation"><h2>Keep the next step beside the state.</h2><p>In a customer implementation, the actual workflow and permissions determine available actions. This example teaches proximity and hierarchy.</p><p class="teaching">Fictional Vitris teaching study. Names, offers and project details are invented; no customer outcomes are implied.</p></section></study-relay-workflow>