Toc
Toc
Shared table-of-contents surfaces.
Root
qp-toc
Shared table-of-contents surface.
Children
qp-toc__item
Item within a table of contents.
qp-toc__section
Section composed by TOC inside a StickyTray; uses compact Section spacing.
Example
Rendered HTML
<div class="qp-card-list">
<div class="qp-card qp-card--toc">
<div class="qp-card__head">
<div class="qp-card__title-row">
<span class="qp-icon qp-card__icon" aria-hidden="true">🧭️</span>
<h3 class="qp-card__title">Table of Contents</h3>
</div>
</div>
<div class="qp-card__body">
<nav class="qp-menu qp-toc" aria-label="Table of Contents" data-qp-menu>
<ul class="qp-menu__list">
<li class="qp-menu__item qp-toc__item" data-qp-menu-item>
<a class="qp-menu__link" href="#introduction">Introduction</a>
</li>
<li class="qp-menu__item qp-toc__item" data-qp-menu-item>
<a class="qp-menu__link" href="#field-skills">Field Skills</a>
</li>
</ul>
</nav>
</div>
</div>
</div>