Skip to content

Archive index

Preview Available in release assets

Present a chronological, server-rendered list of editorial entries with excerpts and durable pagination links.

Server contract

Use .thin-archive-index on an ordered list of articles. Pair with pagination and server-owned page boundaries.

Landmarks, headings, links, article body, archive list, and pagination remain complete without CSS, JavaScript, or enhancement.

Archive index primary example

Show code
<main class="thin-page-shell" id="content">
  <header class="thin-container">
    <h1>Field notes archive</h1>
    <p>Chronological index with durable pagination links.</p>
  </header>
  <section class="thin-region-rhythm" aria-labelledby="archive-heading">
    <div class="thin-container">
      <h2 id="archive-heading">2026</h2>
      <ol class="thin-archive-index">
        <li>
          <article>
            <header class="thin-cluster">
              <h3><a href="/notes/designing-for-content/">Designing for content that refuses to be tidy</a></h3>
              <time datetime="2026-08-01">August 1</time>
            </header>
            <p>A short excerpt remains readable when CSS is unavailable.</p>
          </article>
        </li>
        <li>
          <article>
            <header class="thin-cluster">
              <h3><a href="/notes/measure-without-breakpoints/">Measure without breakpoints</a></h3>
              <time datetime="2026-07-12">July 12</time>
            </header>
            <p>Intrinsic layouts respond to container width, not viewport guesses.</p>
          </article>
        </li>
      </ol>
      <nav class="thin-pagination" aria-label="Archive pages">
        <a href="?page=1" aria-current="page">1</a>
        <a href="?page=2">2</a>
      </nav>
    </div>
  </section>
</main>

Anatomy

  • Page heading
  • Grouped archive sections
  • Ordered article list
  • Linked titles and times
  • Excerpt paragraph
  • Pagination navigation

Variants and sizes

  • Year grouping
  • Tag-filtered archive
  • Feed-style index

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • One page of results
  • Empty archive
  • Long localized titles
  • Missing excerpt
  • Narrow container
  • Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Pagination and article links perform ordinary GET navigation. Filtering and sorting remain server-owned.

Accessibility

Use ordered lists for chronological entries, associate times with machine-readable datetime values, and keep pagination links reachable with visible current-page state.

Contract
COMPOSE
Basis
Native article, headings, time, links, and ordered content; no APG widget
Evidence
  • tests/unit/library/editorial-recipes.test.ts

API

Use .thin-archive-index on an ordered list of articles. Pair with pagination and server-owned page boundaries.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, article body, archive list, and pagination remain complete without CSS, JavaScript, or enhancement.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css

Dependencies: None

Source: packages/ui/src/items/editorial/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes