Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
page-meta
Document metadata display as a styled definition list with automatic JSON-LD structured data injection.
Overview
The <page-meta> component displays document metadata in a structured, styled block. It uses a <dl> (definition list) for semantically correct key-value pairs and automatically generates Schema.org JSON-LD structured data from the visible content.
Without JavaScript, the <dl> renders as a readable metadata block. With JS, the component injects a <script type="application/ld+json"> for search engines and tools.
Basic usage
<page-meta> <dl> <dt>Author</dt> <dd> <address> <a href="/team/tpowell" rel="author">T. Powell</a> </address> </dd> <dt>Published</dt> <dd><time datetime="2026-01-15">January 15, 2026</time></dd> <dt>Updated</dt> <dd><time datetime="2026-02-20">February 20, 2026</time></dd> <dt>Version</dt> <dd>2.1.0</dd> <dt>Trust</dt> <dd data-trust="ai-assisted">AI-Assisted</dd> <dt>Keywords</dt> <dd> <ul> <li>provenance</li> <li>metadata</li> <li>trust</li> </ul> </dd> </dl></page-meta>Variants
Compact
The .compact class switches from a grid layout to an inline flow, suitable for use in article headers or footers.
Compact variant
<page-meta class="compact"> <dl> <dt>Author</dt> <dd>T. Powell</dd> <dt>Updated</dt> <dd><time datetime="2026-02-20">Feb 20, 2026</time></dd> <dt>Version</dt> <dd>2.1.0</dd> </dl></page-meta>With Version History
Use a <details> element inside a <dd> for collapsible revision history. No JavaScript needed for the toggle.
Version history
<page-meta> <dl> <dt>Author</dt> <dd><address>T. Powell</address></dd> <dt>Version</dt> <dd>2.1.0</dd> <dt>History</dt> <dd> <details> <summary>3 revisions</summary> <ol reversed> <li> <time datetime="2026-02-20">Feb 20</time> — v2.1.0: Updated API examples </li> <li> <time datetime="2026-01-30">Jan 30</time> — v2.0.0: Rewrote for new architecture </li> <li> <time datetime="2026-01-15">Jan 15</time> — v1.0.0: Initial publication </li> </ol> </details> </dd> </dl></page-meta>JSON-LD Output
On connectedCallback, the component reads the <dl> and maps known keys to Schema.org properties. The following keys are recognized:
<dt> Text | Schema.org Property |
|---|---|
| Author | author (Person) |
| Published | datePublished |
| Updated | dateModified |
| Version | version |
| Keywords | keywords (comma-separated) |
| Trust | creditText |
Generated JSON-LD
content:{ "@context": "https://schema.org", "@type": "Article", "author": { "@type": "Person", "name": "T. Powell", "url": "/team/tpowell" }, "datePublished": "2026-01-15", "dateModified": "2026-02-20", "version": "2.1.0", "keywords": "provenance, metadata, trust", "creditText": "AI-Assisted"}Relationship to <page-info>
<page-meta> is a composable sub-pattern of the richer <page-info> component. Use <page-meta> standalone for simple metadata display, or embed it within a <page-info> disclosure panel for the full provenance experience.
Accessibility
- Uses
<dl>for semantic key-value metadata — screen readers announce "Author: T. Powell" naturally - The
<address>element wraps author names to provide contact context <time>elements include machine-readabledatetimeattributes- JSON-LD injection is invisible to users and assistive technology