Heroes & Top-of-Page Live

sa-toc v2026-06-05

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.

Source skill: toc-design · Updated 2026-06-06 00:19:28

Edit

Live preview

Open ↗

When to use

Long content pages (1500+ words) with five or more h2 sections.

Rules & constraints

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

https://aguiarinjurylawyers.com/

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}