Contents Pill

The mobile counterpart of the case-study Table of Contents, and of the page's back link once the hero has scrolled away. A floating card at the top of the screen (below lg) with two rows: where you are — back link and title — above what you are reading, which expands on tap to the full section list. A progress line fills along the card's bottom edge. It shares useScrollSpy with TableOfContents, sits on the nav-pill-surface glass, and drops below the FloatingNav pill whenever that one is up.

Live

Narrow the window below 1024px and scroll — the card appears at the top of the screen while the demo sections below are on screen. On desktop the same items render as the sticky Table of Contents instead.

What the product is

Placeholder section so the pill has something to track.

Impact

Placeholder section so the pill has something to track.

The problem I was there to solve

Placeholder section so the pill has something to track.

What I'd change now

Placeholder section so the pill has something to track.

tsx

const toc = sectionsToToc(sections)

<ContentsPill items={toc} targetId="case-study-body" title={caseStudy.title} />
<div id="case-study-body">…</div>

Props

Prop	Type	Default	Description
`items`*	`{ id: string; label: string }[]`	-	The same section list TableOfContents renders on desktop. Ids must match the section elements on the page.
`targetId`*	`string`	-	Id of the element being read. The pill is shown only while that element is on screen, and the progress line spans its height.
`title`	`string`	-	Name of the thing being read, shown beside the back link on the top row. Truncates rather than wrapping.
`backHref`	`string`	`"/work"`	Where the back link goes.
`backLabel`	`string`	`"All work"`	Text of the back link. Name the destination rather than the action — the arrow already says “back”.
`label`	`string`	`"Contents"`	Accessible name for the disclosure and its list.