Reference index
Task#
Use this pattern when a reader needs to find, compare, and move through a large structured reference without losing its context. It is used for the main site’s airline codes, geographic regions, international country calling codes, phonetic alphabet, and workforce frameworks references.
Composition#
The pattern combines an Anchor index for repeated named sections, a Data table for comparison, a Filter row only when controls change the data shown, and Pagination when a dataset must be divided into pages. The page layout chooses only the pieces the data requires.
Content and data#
The data source must provide stable identifiers, visible labels, and enough structure to generate table rows and repeated sections. An index item names its destination and may show a count; the count never replaces the label. Sources and update scope remain visible so the reference does not look more authoritative than its data.
Responsive behaviour#
The reference stays one reading flow. Wide tables use their existing scroll region instead of shrinking labels beyond readability. The anchor index wraps compact links, filters remain operable before the affected data, and pagination retains its ordinary link or button targets at every width.
Implementation#
Each reference layout shapes its data into page-specific sections and passes a compact items slice to data-page/anchor-index.html. The data-page partials provide the shared table wrapper, filter controls, and pagination. JavaScript is limited to interactions that change the dataset or page state; anchor links remain ordinary browser fragment navigation.
Pattern manifest
- Kind
- Pattern
- Category
- Discovery
- Status
- Implemented
- Content and data
- one structured data source with stable identifiersnamed repeated sections with meaningful labels and optional countssource attribution and a clear update boundary
- Accessibility
- named fragment navigation landmark when repeated sections are presentvisible labels on every link and control; counts are supplementaryfilter, table, and pagination states remain keyboard-operable
- Implementation
- Partial:
layouts/partials/data-page/anchor-index.htmllayouts/partials/data-page/filter-row.htmllayouts/partials/data-page/table-pagination.htmllayouts/partials/data-page/table-wrap.htmlLayout:layouts/references/airline-codes.htmllayouts/references/geographic-regions.htmllayouts/references/international-country-calling-codes.htmllayouts/references/phonetic-alphabet.htmllayouts/references/workforce-frameworks.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.js - Related patterns
- Documentation layout
Accessibility#
- An anchor index is a named navigation landmark of ordinary fragment links. It moves to content already on the page; it never acts as a filter.
- Table headers, filters, and pagination retain their native or documented control semantics. Keyboard users can reach every link and control in source order.
- A count supplements a visible section label and must never be a link’s only text.
- The responsive table scroll region preserves table structure and exposes its accessible name rather than flattening semantic data into cards.
- Use a filter row only when it changes what is visible. For a shortcut to an existing section, use the anchor index instead.