page-info

Document provenance disclosure panel showing authorship, trust badges, content history, and AI provenance declarations.

Overview

The <page-info> component is a disclosure panel for document provenance. Its trust bar summary shows author, date, and a trust badge at a glance. Clicking expands a detail panel with authorship, history, and AI provenance information.

Without JavaScript, the <details>/<summary> structure provides native expand/collapse behavior. With JS, the component adds relative time rendering and reading time computation.

<page-info> <details> <summary> <span class="page-info-author"> <a href="/team/jane" rel="author">Jane Doe</a> </span> <span class="page-info-sep" aria-hidden="true">·</span> <time datetime="2026-03-15" data-relative> 15 March 2026 </time> <span class="page-info-sep" aria-hidden="true">·</span> <span class="page-info-badge" data-provenance="human-ai-assisted" data-trust="declared" aria-label="Content provenance: human-written, AI-assisted"> Human-written, AI-assisted </span> </summary> <nav class="page-info-panel"> <section> <h2 class="page-info-section-heading">Author</h2> <ul class="page-info-author-list"> <li> <address> <a href="/team/jane" rel="author">Jane Doe</a> <span class="page-info-role">Lead author</span> </address> </li> </ul> </section> <section> <h2 class="page-info-section-heading">History</h2> <dl> <div> <dt>Published</dt> <dd><time datetime="2026-01-10">January 10, 2026</time></dd> </div> <div> <dt>Last updated</dt> <dd> <time datetime="2026-03-15" data-relative> 15 March 2026 </time> </dd> </div> <div> <dt>Version</dt> <dd>1.4.0</dd> </div> </dl> </section> <section> <h2 class="page-info-section-heading">How this was made</h2> <dl> <div> <dt>Authorship</dt> <dd>Human-written with AI assistance</dd> </div> <div> <dt>AI tools used</dt> <dd>Claude Sonnet 4 — research and drafting</dd> </div> <div> <dt>Human review</dt> <dd>Substantial edit</dd> </div> </dl> </section> </nav> </details> </page-info>

Auto Mode

When the CMS cannot easily render the full static markup, auto makes the component self-contained. It reads provenance information from <meta> tags in the page <head> and renders the panel automatically.

<page-info auto></page-info>

Required Meta Tags

<meta name="author" content="Jane Doe"> <meta property="article:author" content="/team/jane"> <meta name="last-modified" content="2026-03-15"> <meta name="content-version" content="1.4.0"> <meta name="content-provenance" content="human-ai-assisted"> <meta name="ai-tools" content="Claude Sonnet 4"> <meta name="human-review" content="substantial-edit"> <meta name="license" content="CC BY 4.0"> <meta name="license-url" content="https://creativecommons.org/licenses/by/4.0/">

AI Provenance Vocabulary

The content-provenance meta tag uses a controlled vocabulary, ordered from most human-controlled to least:

Value	Display Label
`human`	Human written
`human-ai-assisted`	Human-written, AI-assisted
`ai-human-edited`	AI draft, human edited
`ai-human-reviewed`	AI-generated, human-reviewed
`ai-generated`	AI-generated
`synthesized`	Synthesized from sources
`translated`	Translated
`migrated`	Migrated content

Trust Tiers

The badge data-trust attribute indicates the verification level. Currently, only declared is active (cryptographic verification is planned).

Tier	`data-trust`	Badge Style	Meaning
0	`undeclared`	Neutral	No provenance metadata
1	`declared`	Warning	Provenance claimed, not verified
2	`domain-anchored`	Info	Public key reachable at author's domain
3	`verified`	Success	DOM content matches cryptographic signature
—	`failed`	Error	Signature present but content doesn't match

Attributes

Attribute	Values	Default	Description
`auto`	Boolean	—	Render from `<meta>` tags instead of light DOM
`og-preview`	Boolean	—	Show Open Graph social preview card (planned)

Events

Event	Detail	Description
`page-info:verified`	`{ status: string, tier: number }`	Fired when trust assessment completes. Bubbles.

// Listen for trust assessment document.addEventListener('page-info:verified', (e) => { console.log(e.detail.status); // 'declared' console.log(e.detail.tier); // 1 });

Relationship to `<page-meta>`

<page-meta> is a simpler, composable sub-pattern focused on metadata display and JSON-LD. <page-info> is the full disclosure panel with trust bar, author details, and provenance sections. They can be used independently or together.

Accessibility

<details>/<summary> provides native expand/collapse without JavaScript
Trust badges include aria-label with the full provenance description
Separator dots use aria-hidden="true"
Section headings provide landmarks within the expanded panel
Relative time text replaces the <time> content but the datetime attribute preserves the machine-readable date