Original Review Notes0.1 component documentation with required content and independent optional references
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Review Notes 0.1 · component documentation</title><style>:root{--rn-ink:#20394d;--rn-gap:16px;--rn-focus:#7c2d12}*{box-sizing:border-box}body{margin:0;background:#eef2f3;color:var(--rn-ink);font:17px/1.6 system-ui,sans-serif}main{max-width:900px;margin:auto;padding:26px 22px 50px}header{border-top:6px solid var(--rn-ink)}h1{font-size:clamp(28px,5vw,39px);line-height:1.15}h2{font-size:23px}section{background:white;border:1px solid #c8d3d9;padding:20px;margin:20px 0}.specimen{display:grid;gap:var(--rn-gap)}.instruction{border-left:4px solid var(--rn-ink);padding:12px;background:#edf3f7;margin:0}.reference{border:1px solid #aebfc9;padding:12px}.reference summary{font-weight:700;cursor:pointer}.reference summary:focus{outline:3px solid var(--rn-focus);outline-offset:3px}.reference p{margin:12px 0 0}dl{margin:0}dt{font-weight:700}dd{margin:0 0 14px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.6 ui-monospace,monospace}code{overflow-wrap:anywhere}.meta{font-weight:700}.blank{display:block;min-height:26px;border-bottom:1px solid #aebfc9}@media(max-width:600px){main{padding:20px 16px 40px}section{padding:16px}}</style></head><body><main><header><p class="meta">ORIGINAL TEACHING SYSTEM · VERSION 0.1</p><h1>Review Notes component reference</h1><p>Purpose: static editorial review pages. This is a filled documentation example, not a published organizational release.</p></header><section><h2>Usage rule and working specimen</h2><p>RN-01 is required content. RN-02 holds optional source context. Keep those roles distinct.</p><div class="specimen"><p class="instruction" id="required">Read the review scope before commenting.</p><details class="reference" id="reference-a"><summary>Reference notes</summary><p>Compare the draft against the supplied source notes.</p></details><details class="reference" id="reference-b"><summary>Implementation notes</summary><p>Keep the required instruction outside the optional references.</p></details></div></section><section><h2>RN-02 · component contract</h2><dl><dt>Use when</dt><dd>The reader may need optional source context.</dd><dt>Do not use when</dt><dd>The hidden content is an instruction most readers need.</dd><dt>Required structure</dt><dd>Native details, descriptive summary, supplied reference body.</dd><dt>Initial and changed states</dt><dd>Both instances closed initially. Open and close independently; the other instance and required instruction stay unchanged.</dd></dl><pre><details class="reference">
<summary>Reference notes</summary>
<p>Compare the draft against the supplied source notes.</p>
</details></pre></section><section><h2>Shared values actually used here</h2><dl><dt>--rn-ink</dt><dd>#20394d · text</dd><dt>--rn-gap</dt><dd>16px · spacing in the specimen</dd><dt>--rn-focus</dt><dd>#7c2d12 · focus outline,3px solid with3px offset</dd></dl></section><section><h2>Expected checks and observation scope</h2><p>Inspect initial state, both independent open/close paths, retained text, visible required instruction, focus indication and narrow-width reading.</p><p>Actual browser results live in the execution receipts. Keyboard activation, assistive technology, other browsers and print remain observation pending; no accessibility certification claimed.</p></section><section><h2>Change note and maintained source</h2><p>Version0.1 is this authored teaching specimen. Actual owner, repository release and approval reference: not supplied.</p><p>Changed rule/value · reason · affected consumers · checks and actual results<span class="blank"></span>Actual release reference<span class="blank"></span></p><p>A changed reference page does not update earlier copied consumers. Keep prior specifications and identify the pages to check.</p></section><footer>The complete HTML and Markdown specification form the reference. No component package, design-tool export, save or rollout is performed.</footer></main></body></html>