Plate № 23 · Social cards · og:image

A pattern from the gf.cx specimen book

A social card that admits the page is a stub

The problem

An archive-recovery surface will have pages whose body copy is placeholder text — "No content was preserved", "Article body pending recovery". Every one of those pages still has a <title>. When a social platform fetches the og:image for one of them it gets nothing, and so inserts a generic clickbait crop of whatever random pixel region it likes. The alternatives are equally broken: reusing the same sitewide widget image on every stub (defeats per-page semantics, makes link-audits noisy) or faking a thematic image the article doesn't actually have. A third path exists: a coherent, brand-owned "in restoration" card that is honest about its state without broadcasting failure.

The element, in-page

The demo below renders the pending-state card at viewport width. The original is 1200 × 630 — exactly the og:image canvas. JavaScript scales it to fit the preview box so you see the real proportions, not a cropped thumbnail. Flip the tabs to read the full source.

The three design principles

• Restraint reads as confidence. A dotted border or construction-zone treatment announces incompleteness too loudly. The absence of an article hero is acknowledged through the caption alone — the chrome stays brand-register calm. (This was the A/B/C choice in 2026-06-03; Variant B won over A's dotted border and C's dark-frame.)
• Honest without being apologetic. The caption "article in restoration" names the state plainly. It is not "UNDER CONSTRUCTION" (retro shame) and not a generic tagline (dishonest). The surface owns its current truth.
• One stable URL, not per-page captures. All stub pages share a single og-pending.jpg hosted at a stable CDN path. There is nothing to generate or invalidate per page — the card is a resource, not a per-page render.

Where it applies — and where it doesn't

• Use when a page has a <title> + body shell but body copy is a recovery placeholder ("No content was preserved", "Article body pending recovery").
• Use when an audit pass flags og_image: missing and there is no content-derivable alternative — no <img>, no embedded video, no thematic linked image.
• Use when a page is part of an archive-recovery surface where the eventual hero image will arrive later; this card holds the slot.
• Skip when the page has actual body content and at least one body <img> — use that image.
• Skip when the page has an embedded video — derive from the video's thumbnail (i.ytimg.com/vi/<ID>/maxresdefault.jpg).
• Skip when the page has thematic content but no embedded media — source a proper content-derived image instead. This card is the fallback, not the default.

Reusable elements

The named, copyable pieces — lift any one without the others:

• Card template — source.html in this directory: Newsreader italic wordmark at 280px, hairline underline, two-part caption line. Edit copy + re-render via Playwright at 1200 × 630 with device_scale_factor=2.
• Production PNG — pending-card-1200x630.png (lossless, 62 KB) ready to push to CDN. The compressed variant share.png (35 KB) is the patterns.gf.cx own social card — pattern-as-specimen.
• Stable CDN URL convention — one file at assets.SURFACE/og-pending.jpg, referenced by every stub page on that surface. Nothing to invalidate per page; swap the real hero in when content arrives.
• OG meta boilerplate — four tags: og:image, og:image:width, og:image:height, og:image:alt. The alt text "DARE — article in restoration (pending content recovery)" gives accessibility and context to crawlers.
• Variant copy slots — swap the kicker and caption for other surfaces: LEDGER · ENTRY PENDING for personal-records pages; LIBRARY · CATALOGUING for library.gf.cx. Keep wordmark, palette, hairline — swap only copy.

Reference

Source

Dan, 2026-06-03 · feedback_graceful_degradation_pending_state_pattern.md in the gf.cx kb. A/B/C variant review; Variant B (quiet minimalist) selected.

In use / example

dare.co.uk/observations/network-status/ — one of six archive-stub pages carrying the card. The image itself lives at dare.co.uk/assets/og-pending.jpg; hover the link to preview it.

Reusable elements

source.html template · production PNG · stable CDN URL convention · OG meta boilerplate · variant copy slots (listed above).

Origin

dare.co.uk archive-recovery sprint, 2026-06-03 — first applied to six observation and photography stubs whose bodies did not survive an earlier CMS migration.