contents-page-design

name	contents-page-design
description	Use when designing a table of contents for long-form articles or documentation. Contents page orients reader and signals editorial seriousness.

Contents Page Design

Contents = navigable list of sections with page-number sigils. Anchor links to in-page sections. Editorial signal of structured content.

Contents structure

1. Title ('Contents' or 'In This Article')
2. Section list — numbered or with sigils ('01 / 06')
3. Each item — section title + anchor link
4. Optional sub-items — h3 children indented
5. Reading time estimate — 'Total reading: 12 minutes'
6. Page numbering — for printable versions

HTML implementation

<nav class='contents'>
  <h3>Contents</h3>
  <ol>
    <li><a href='#methodology'><span class='sigil'>01</span> Methodology</a></li>
    <li><a href='#axes'><span class='sigil'>02</span> Four Grading Axes</a></li>
    <li><a href='#pop'><span class='sigil'>03</span> Pop Reports and Pricing</a></li>
  </ol>
  <small>Total reading: ~12 minutes</small>
</nav>

Sticky contents

For long articles, sticky contents (right rail) updates as reader scrolls. Active section highlighted:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      document.querySelectorAll('.contents a').forEach(a => a.classList.remove('active'));
      document.querySelector(`a[href='#${entry.target.id}']`).classList.add('active');
    }
  });
});

Where this fits in the X3 empire

Used in CardPrepAI long-form methodology articles.