独家
Content Age <mv-content-age>
一眼可见的内容新鲜度：包裹任意内容（文档页头、帮助中心文章、价格表、政策），内容保持原样，旁边一幅带框的小肖像会随距上次审核的时间而逐渐变老。
文化出处
道林·格雷的画像，奥斯卡·王尔德（1890 年，小说）。道林始终年轻、完美无瑕，而他藏起来的肖像替他衰老，承受时间留下的痕迹。在这里，内容本身保持崭新，旁边的一幅小肖像则随距上次审阅的时间而衰老，一次审阅就能让它恢复青春。
工作原理
一眼就能看出内容的新鲜度：包裹任意内容（文档页头、帮助中心文章、价格表、政策条款），内容本身保持原样，旁边一幅带框的小肖像则随距上次审阅的时间而衰老。年龄比（距 updated 的时间 / lifespan）映射到五个阶段（fresh、settled、aging、stale、decrepit，阈值可配置），并驱动一幅用内联 SVG 绘制、按种子程序化生成的半身像：每个条目都有自己的面孔，随着衰老，颜色褪去、清漆泛黄、细纹出现、五官和肩膀下垂、头发变白、镀金画框失去光泽，生出铜锈和裂纹，暗角中积起灰尘，一切都是连续变化的。肖像是一个按钮，点击后打开面板，显示阶段、确切日期、相对于寿命的年龄刻度、负责人，以及一个“Mark as reviewed”操作，它会以平滑的补间动画和一道闪光让肖像恢复年轻。徽章变体会加上“Aging · Reviewed 7 months ago”；位置可选 inline-start、inline-end、corner，或任何标记了 data-content-age-anchor 的元素。
| 分类 | 数据展示 |
|---|---|
| 类型 | Web Component（<mv-content-age>） |
| 状态 | 稳定版 |
| 套件 | 会自我解释的数字 |
| Keywords | exclusive, culture, freshness, staleness, content-review, last-updated, review-cycle, knowledge-base, documentation, policy, governance, age, portrait, generative, svg, procedural, popover, relative-time |
When to use
- Help-center or internal docs articles must show at a glance which ones are overdue for a review
- A policy, pricing sheet or runbook page should make its own staleness obvious to readers and to its owner
- Content owners need a lightweight in-place “Mark as reviewed” action next to the content they maintain
- A list of documents should be scannable by freshness without adding a dedicated column of dates
Avoid when
- Only a short status label is needed, with no age progression or review action → use Badge instead
- The content changes continuously (live data, feeds) and has no review cycle to measure against
- Hundreds of items render at once on a dense table, where a date column sorts and scans better → use Data table instead
安装
node scripts/add.mjs content-age --out ./src/marvelous使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["content-age"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。
复制的文件（含依赖）：tokens/tokens.css, core/base.css, core/dismiss.js, core/dom.js, core/element.js, core/motion.js, core/position.js, components/content-age/content-age.js, components/content-age/content-age.css。
用法
快速开始，最小可运行标记：
<mv-content-age updated="2026-03-02" lifespan="1y" owner="Legal">
<h2>Data retention policy</h2>
<p>How long we keep customer records, backups and logs.</p>
</mv-content-age>标准标记，可在此基础上通过属性、data-* 和 CSS 变量进行定制：
<div id="ca-demo" style="width:min(100%,46rem);margin-inline:auto">
<style>
#ca-demo { display:grid; gap:1.75rem }
#ca-demo .ca-card { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
#ca-demo .ca-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:1rem 1.25rem; border-bottom:1px solid var(--mv-border) }
#ca-demo .ca-head h3 { margin:0; font-size:.9375rem; letter-spacing:-.01em }
#ca-demo .ca-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
#ca-demo .ca-list { list-style:none; margin:0; padding:.25rem 0 }
#ca-demo .ca-list li + li { border-top:1px solid var(--mv-border) }
#ca-demo .ca-list mv-content-age { align-items:center; padding:.75rem 1.25rem }
#ca-demo .ca-list .mv-content-age-trigger { min-width:12.25rem }
#ca-demo .ca-article { display:flex; align-items:center; gap:.875rem; min-width:0; color:inherit; text-decoration:none }
#ca-demo .ca-icon { display:grid; place-items:center; flex:none; width:2.25rem; height:2.25rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-muted); color:var(--mv-fg-muted) }
#ca-demo .ca-icon svg { width:1.05rem; height:1.05rem }
#ca-demo .ca-article strong { display:block; font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#ca-demo .ca-article:hover strong { text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--mv-border-strong) }
#ca-demo .ca-meta { display:block; margin-top:.125rem; color:var(--mv-fg-muted); font-size:.75rem }
#ca-demo .ca-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding:.75rem 1.25rem; border-top:1px solid var(--mv-border); color:var(--mv-fg-muted); font-size:.8125rem }
#ca-demo .ca-actions { display:flex; gap:.5rem; flex-wrap:wrap }
#ca-demo .ca-policy { padding:1.5rem }
#ca-demo .ca-policy mv-content-age { --mv-content-age-size:88px; --mv-content-age-gap:1.5rem; align-items:center }
#ca-demo .ca-kicker { margin:0; color:var(--mv-fg-muted); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
#ca-demo .ca-policy h2 { margin:.3rem 0 .4rem; font-size:1.5rem; line-height:1.2; letter-spacing:-.02em }
#ca-demo .ca-policy p.ca-lede { margin:0; max-width:34rem; color:var(--mv-fg-muted); font-size:.875rem; line-height:1.55 }
#ca-demo .ca-tags { display:flex; gap:.375rem; flex-wrap:wrap; margin-top:.75rem }
#ca-demo .ca-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem }
#ca-demo .ca-grid .ca-card { padding:1.125rem 1.25rem }
#ca-demo .ca-grid mv-content-age { --mv-content-age-size:40px }
#ca-demo .ca-grid h4 { margin:0 0 .25rem; padding-inline-end:3.25rem; font-size:.9375rem }
#ca-demo .ca-grid p { margin:0; padding-inline-end:3.25rem; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5 }
#ca-demo .ca-grid .ca-price { margin-top:.75rem; padding:0; color:var(--mv-fg); font-size:1.25rem; font-weight:600; letter-spacing:-.02em }
#ca-demo .ca-grid .ca-price small { color:var(--mv-fg-muted); font-size:.8125rem; font-weight:400 }
</style>
<!-- 1 · Policy page header, large portrait -->
<section class="ca-card ca-policy" aria-label="Policy header">
<mv-content-age id="ca-policy" data-days="152" lifespan="1y" owner="Amara Nwosu, Legal" seed="data-retention">
<p class="ca-kicker">Policy · Version 3.2</p>
<h2>Data Retention Policy</h2>
<p class="ca-lede">How long we keep customer records, backups and logs, and how deletion requests are handled across every region we operate in.</p>
<div class="ca-tags">
<span class="mv-badge" data-variant="secondary">Legal</span>
<span class="mv-badge" data-variant="outline">Applies to all workspaces</span>
</div>
</mv-content-age>
</section>
<!-- 2 · Knowledge base, badge variant -->
<section class="ca-card" aria-labelledby="ca-kb-title">
<div class="ca-head">
<div>
<h3 id="ca-kb-title">Help Center · Billing & accounts</h3>
<p>Each article ages against a 6-month review cycle.</p>
</div>
<span class="mv-badge" data-variant="outline">5 articles</span>
</div>
<ul class="ca-list" id="ca-kb">
<li><mv-content-age variant="badge" placement="inline-end" data-days="3" owner="Priya Raman">
<a class="ca-article" href="#"><span class="ca-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg></span>
<span style="min-width:0"><strong>Update your payment method</strong><span class="ca-meta">Billing · 3 min read · 4,812 views</span></span></a>
</mv-content-age></li>
<li><mv-content-age variant="badge" placement="inline-end" data-days="61" owner="Marcus Chen">
<a class="ca-article" href="#"><span class="ca-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg></span>
<span style="min-width:0"><strong>Download invoices and receipts</strong><span class="ca-meta">Billing · 2 min read · 2,390 views</span></span></a>
</mv-content-age></li>
<li><mv-content-age variant="badge" placement="inline-end" data-days="152" owner="Sofia Alvarez">
<a class="ca-article" href="#"><span class="ca-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
<span style="min-width:0"><strong>Change your plan or seat count</strong><span class="ca-meta">Accounts · 4 min read · 1,975 views</span></span></a>
</mv-content-age></li>
<li><mv-content-age variant="badge" placement="inline-end" data-days="243" owner="Daniel Okafor">
<a class="ca-article" href="#"><span class="ca-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
<span style="min-width:0"><strong>Set up single sign-on with SAML 2.0</strong><span class="ca-meta">Security · 7 min read · 864 views</span></span></a>
</mv-content-age></li>
<li><mv-content-age variant="badge" placement="inline-end" data-days="730" owner="Hannah Weber">
<a class="ca-article" href="#"><span class="ca-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></span>
<span style="min-width:0"><strong>Migrate from the legacy v1 API</strong><span class="ca-meta">Developers · 9 min read · 512 views</span></span></a>
</mv-content-age></li>
</ul>
<div class="ca-foot">
<span id="ca-log" aria-live="polite">Open a portrait to see its dates, owner and review action.</span>
<div class="ca-actions">
<button class="mv-button" data-variant="outline" data-size="sm" type="button" id="ca-forward">Fast-forward 3 months</button>
<button class="mv-button" data-variant="ghost" data-size="sm" type="button" id="ca-reset">Reset</button>
</div>
</div>
</section>
<!-- 3 · Cards, portrait in the corner -->
<div class="ca-grid">
<article class="ca-card">
<mv-content-age placement="corner" data-days="18" lifespan="90d" owner="Revenue team">
<h4>Enterprise pricing sheet</h4>
<p>Per-seat pricing, volume tiers and the annual discount grid.</p>
<p class="ca-price">$38 <small>per seat / month</small></p>
</mv-content-age>
</article>
<article class="ca-card">
<mv-content-age placement="corner" data-days="420" lifespan="1y" owner="Site Reliability">
<h4>Incident response runbook</h4>
<p>Severity levels, paging rotation and the customer comms template.</p>
<p class="ca-price">SEV-1 <small>page within 5 minutes</small></p>
</mv-content-age>
</article>
</div>
<script type="module">
const root = document.getElementById("ca-demo");
const all = [...root.querySelectorAll("mv-content-age")];
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
const daysAgo = (n) => { const d = new Date(); d.setDate(d.getDate() - n); return iso(d); };
let offset = 0;
const reset = () => {
offset = 0;
for (const el of all) { el.removeAttribute("now"); el.setAttribute("updated", daysAgo(Number(el.dataset.days))); }
};
reset();
const log = document.getElementById("ca-log");
const title = (el) => el.querySelector("strong, h2, h4")?.textContent.trim() ?? "Item";
root.addEventListener("mv-review", (e) => { log.textContent = `“${title(e.target)}” marked as reviewed.`; });
root.addEventListener("mv-stage", (e) => { log.textContent = `“${title(e.target)}” is now ${e.detail.label.toLowerCase()}.`; });
document.getElementById("ca-forward").addEventListener("click", () => {
offset += 91;
const now = new Date(); now.setDate(now.getDate() + offset);
for (const el of all) el.setAttribute("now", now.toISOString());
log.textContent = `Viewing the list as of ${now.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}.`;
});
document.getElementById("ca-reset").addEventListener("click", () => {
reset();
log.textContent = "Back to today.";
});
</script>
</div>API
Attributes
| Name | 类型 | Default | Description |
|---|---|---|---|
updated | date (YYYY-MM-DD | ISO 8601 | epoch ms) | Date of the last review. A plain YYYY-MM-DD is read as a local calendar date. Missing or invalid: “Never reviewed”, fully aged (decrepit). | |
lifespan | duration | 180d | How long the content stays trustworthy after a review: 36h, 90d, 26w, 6mo (or 6m), 1y; a bare number means days. The age ratio is (now − updated) / lifespan. |
stages | string | 0.25,0.5,0.8,1 | Four ascending ratio thresholds separating fresh | settled | aging | stale | decrepit. Ratio ≥ the last one (1 by default: past the lifespan) is decrepit. |
stage-labels | string | Fresh,Settled,Aging,Stale,Decrepit | Five visible labels for the stages (badge, panel, accessible name), comma-separated. |
seed | string | Seed of the procedural face. Without it, the face is derived from a hash of the text content at first render, so each item gets its own stable face. | |
placement | inline-start | inline-end | corner | inline-start | Where the portrait sits relative to the content: a column before or after it, or absolutely positioned in the top-end corner (leave room with padding on the content). Ignored when an element inside carries data-content-age-anchor: the portrait is then appended into it. |
variant | portrait | badge | portrait | portrait: the framed portrait alone. badge: a compact bordered chip with a smaller portrait, the stage (dot + label) and “Reviewed 7 months ago”. |
owner | string | Person or team responsible for reviewing the content, shown in the panel. | |
label | string | Freshness | Prefix of the accessible name and panel kicker (“Freshness: aging, …”). |
now | date | Freezes the clock at this date (tests, screenshots, server-rendered snapshots, “as of” views). Without it, the real time is used and re-checked every minute and on tab return. | |
readonly | boolean | Hides the “Mark as reviewed” action (readers who cannot review). | |
data-content-age-anchor | marker attribute | On a descendant: the portrait button is appended into that element (e.g. a card’s meta line) instead of beside the content. | |
data-stage | fresh | settled | aging | stale | decrepit | Set by the component on the host (styleable). |
Properties
| Name | 类型 | Description |
|---|---|---|
age | { ratio, stage, label, days, updated, due, lifespan, visual, now } | Read-only snapshot: ratio (0…∞), stage key and label, days since the review, updated and due as Date (null if never reviewed), lifespan in days, visual age 0-1 used by the portrait (1 − e^(−1.1·ratio)). |
updated / lifespan / stages / seed / placement / variant / owner / now / readonly | reflected | Every attribute is mirrored as a property; changing one re-renders (age changes are tweened). |
Methods
| Name | Description |
|---|---|
review() | Marks the content as reviewed now (or at the frozen now): sets updated to an ISO timestamp, rejuvenates the portrait and emits mv-review. |
open() / close() | Opens (focus moves into it) or closes the details panel. |
refresh() | Recomputes age, stage and labels immediately (it also happens every minute, on tab return and on attribute changes). |
Events
| Name | Description |
|---|---|
mv-review | “Mark as reviewed” (or review()). detail: { previous: Date | null, updated: Date }. Persist it on your side; set updated back if the save fails. |
mv-stage | The stage changed after the first render: time crossed a threshold while the page was open, updated, lifespan or now changed, or a review happened. detail: { stage, previous, ratio, days, label }. |
Content structure
| Name | Description |
|---|---|
(content) | Any content; it is moved into a .mv-content-age-body wrapper and never altered. |
CSS classes
| Name | Description |
|---|---|
mv-content-age-trigger | The portrait button (aria-expanded, aria-controls) holding .mv-content-age-frame and, in the badge variant, .mv-content-age-text (.mv-content-age-stage + .mv-content-age-when). |
mv-content-age-frame / mv-content-age-svg | Frame box (4:5) and the procedural SVG inside it; data-size="lg" in the panel. |
mv-content-age-body | Wrapper of the original content. |
mv-content-age-panel | Details panel (Popover API, non-modal role=dialog): -panel-head, -kicker, -panel-stage, -panel-summary, -gauge (-meter, -meter-fill, -meter-tick, -meter-caption), -facts (dl), -review button. |
CSS variables
| Name | 类型 | Default | Description |
|---|---|---|---|
--mv-content-age-size | 44px (34px in badge) | Portrait width; the height follows a 4:5 ratio. | |
--mv-content-age-panel-size | 72px | Width of the large portrait in the panel. | |
--mv-content-age-gap | var(--mv-space-4) | Space between portrait and content (inline placements). | |
--mv-content-age-inset | 0 | Offset from the corner (corner placement). | |
--mv-content-age-gild | soft gold (light-dark) | Artistic: the frame’s gilding when fresh. Set it to var(--mv-border-strong) for a plain neutral frame. | |
--mv-content-age-patina | muted olive (light-dark) | Artistic: what the gilding turns into with age (also the chips on the frame). | |
--mv-content-age-age | output | Set on the host: visual age 0-1, usable to style the content itself (e.g. a faint border). |
Accessibility
The stage is never conveyed by the picture alone: the portrait is a real <button> (aria-haspopup="dialog", aria-expanded, aria-controls) whose accessible name spells it out (“Freshness: aging, last reviewed 7 months ago, review due in 2 months” / “…, review overdue by 3 months”), the badge variant prints the stage label and relative time next to a colored dot, and the panel repeats stage, dates, lifespan share and owner in text. The procedural SVG is aria-hidden. The panel is a non-modal role="dialog" labelled by its stage heading, shown with the Popover API (top layer) and positioned next to the portrait; opening moves focus into it, Tab reaches “Mark as reviewed”, Escape or an outside click closes it and Escape returns focus to the portrait, and tabbing out closes it. After a review a polite role=status announces “Marked as reviewed. Freshness: fresh.”; stage crossings are only announced while the panel is open so a page full of items stays quiet. Visible focus rings on the portrait and the button; full touch support (plain taps). Relative times use Intl.RelativeTimeFormat en-US, dates Intl.DateTimeFormat. prefers-reduced-motion and [data-motion="reduce"]: no rejuvenation tween, glint or bounce, the portrait switches instantly to its new age; the panel appears without motion.