SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-toc
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Dropdown 'On This Page' table-of-contents using the live .sa-toc-wrap design. ALWAYS starts closed on every viewport (desktop and mobile) — the <details> element must never carry the open attribute. Never use the deprecated static .sa-toc-wrapper variant.
When to use
Long content pages (1500+ words) with five or more h2 sections.
Source skill
Rules (one per line, leading dash optional)
1. Dropdown 'On This Page' table-of-contents — single canonical version is the live .sa-toc-wrap design. 2. ALWAYS starts CLOSED on every viewport (desktop AND mobile). The <details class="sa-toc-wrap"> element must NEVER carry the open attribute. Correct tag: <details class="sa-toc-wrap" id="sa-toc-wrap">. Strip a stray ' open' on sight. 3. Never use the static .sa-toc-wrapper variant — that's a deprecated pattern. 4. Pull headings from h2 anchors on the page automatically. 5. toc-design is the canonical source skill for all TOC rules.
Live reference URL
Deployment notes
Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules.
HTML
<details class="sa-toc-wrap"> <summary>On This Page</summary> <ol class="sa-toc-list"> <li><a href="#section-1">[H2 Title 1]</a></li> <li><a href="#section-2">[H2 Title 2]</a></li> <li><a href="#section-3">[H2 Title 3]</a></li> <li><a href="#section-4">[H2 Title 4]</a></li> </ol> </details>
CSS
.sa-toc-wrap{background:#f7f9fa;border-left:4px solid #D97706;border-radius:6px;margin:24px 0 32px;max-width:820px;font-family:Poppins,sans-serif} .sa-toc-wrap summary{font-weight:700;font-size:15px;color:#0B212D;padding:14px 22px;cursor:pointer;list-style:none;position:relative;letter-spacing:1px;text-transform:uppercase} .sa-toc-wrap summary::-webkit-details-marker{display:none} .sa-toc-wrap summary::after{content:"▾";position:absolute;right:22px;color:#D97706;transition:transform .2s} .sa-toc-wrap[open] summary::after{transform:rotate(180deg)} .sa-toc-list{margin:0;padding:0 22px 18px 40px} .sa-toc-list li{font-weight:500;font-size:14px;padding:4px 0} .sa-toc-list a{color:#0B212D;text-decoration:none;border-bottom:1px solid transparent} .sa-toc-list a:hover{border-bottom-color:#D97706}
Save changes
Cancel