Wordnerds Template Vocabulary

Version: 0.2
Last updated: 2026-05-28
Renderer contracts: lib/template-contracts.ts (variants + slots — validation source of truth)
Orchestration guidance: docs/TEMPLATE-REGISTRY.md (SB7 beats, AEO blocks, variant selection rules)

This file is the canonical vocabulary of all templates available in the Wordnerds site renderer. It is the source of truth for: which templates exist, their grid pattern, their slot definitions (with types), their funnel-stage suitability, and which surfaces they apply to.

Design-orchestrator uses this file for template selection (funnel-stage suitability field). It then reads docs/TEMPLATE-REGISTRY.md for SB7/AEO overlay and variant selection rules. Neither doc duplicates the other.

Renderer Sync Checklist

Adding a new template to this file triggers four simultaneous changes:

1. lib/schema.ts — add the new name to the TemplateType union
2. lib/template-contracts.ts — add a TemplateContract entry (variants, required_slots, optional_slots)
3. lib/fragments/<name>.ts — implement the renderer fragment; register in lib/renderer.ts
4. design-orchestrator/SKILL.md Prerequisites — add the new template name to Stage 1.1 load list

Changing a variant name or slot name: update template-contracts.ts + this file in the same commit. Out-of-sync entries silently degrade orchestrator decisions.

Quick Reference

Organisms

SiteNavOrganism

Purpose. Site-wide navigation header — same on every page, content variation only.
Grid pattern. Full bleed (12-col). Content constrained to .wn-container (1280px).
Layer: organism — positioned outside <main> by the renderer.

login_cta renders as a brand-blue lozenge (.site-nav__login) beside the primary CTA — the existing-customer route into the platform (opens in a new tab). Blue = secondary CTA per DESIGN §2; off-black text (white-on-brand-blue fails contrast at nav-label size). The yellow primary CTA stays the surface's single yellow element.

Variants: sticky-dark · sticky-light
Funnel stages: all
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#SiteNavOrganism

SiteFooterOrganism

Purpose. Site-wide footer — legal, navigation reinforcement, entity assertion (AEO), certifications.
Grid pattern. Full bleed (12-col dark background). Top row: identity block (logo + tagline + entity descriptor) left, certification badges right. Below: a 5-column link grid (2-col ≤768px, 1-col ≤480px), then the legal bar.
Layer: organism — positioned outside <main> by the renderer.

tagline must be copied verbatim from the entity canon's approved short descriptors (AEO paraphrase-drift rule). description is the approved 60-word entity descriptor — the footer is a site-wide entity-assertion surface, so it too is verbatim-only. certifications renders a badge row (Cyber Essentials Plus; ISO 27001 joins when certified — the row takes additional images with no layout change). legal_links accepts a leading text item for the © line.

Variants: dark-columns · dark-3col (legacy)
Funnel stages: all
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#SiteFooterOrganism

Templates

HeroTemplate

Purpose. Page-opening section — sets the frame in ≤8 seconds. Mandatory on every page.
Grid pattern.

• dark-split / light-split → Asymmetric (7+5): text left (.wn-col-7), media right (.wn-col-5)
• centred → Full bleed (12-col), content in .wn-col-10-centred

Section padding: --space-3xl (108→120px) — hero only.

Variants: dark-split · light-split · centred
Funnel stages: all (hero is mandatory on every page regardless of stage)
Surfaces: website, gen-ui, lead-magnets
Orchestration: docs/TEMPLATE-REGISTRY.md#HeroTemplate

ProblemStatementTemplate

Purpose. The empathy moment — "you're not alone." Establishes the villain. Precedes the authority proof.
Grid pattern. Even split (6+6): text left, quote/illustration right (or flipped per variant).
Section padding: --space-2xl (72→80px) standard.

Variants: text-left-quote-right · text-right-quote-left
Funnel stages: EXPLORING (primary), TRYING (problem-restatement opener)
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#ProblemStatementTemplate

FeaturePillarsTemplate

Purpose. Three or four parallel capabilities or differentiators as visually equal pillars.
Grid pattern.

• 3-up → 3-up grid (4+4+4): three .wn-col-4 items; each pillar carries a supporting image
• 4-up → 2×2 grid (each pillar is .wn-col-6): four items in two rows of two. Per-pillar image is dropped in favour of a brand-blue numbered circle chip (.guide-proof__pillar-number) inline with the <h3>. See PATTERNS.md §10 for chip rules. Use this variant for analytical-technique or named-capability lists where numbered enumeration is the right reading frame.
• media-left → wide + narrow split (8+4): the section media fills the left column (.wn-col-4); the heading + intro + a vertical stack of pillars (.guide-proof__pillar--stacked, no per-pillar image) sit in the right column (.wn-col-8). Use when the pillars are a short labelled list that reads better beside an illustration than as a card grid — e.g. the C-Rating "four Consumer Standards" listed down the right of a single illustration. Requires the media slot; falls back to the card grid if absent.

header_media + header_media_href (co-brand lockup + backlink). header_media renders a logo/lockup to the right of the <h2>, level with it (.guide-proof__header-row / .guide-proof__header-media) — e.g. the Housemark × Wordnerds lockup on the C-Rating offer section. Card-grid path only (not media-left). If header_media_href is set, the lockup becomes a backlink (opens in a new tab, rel="noopener") so a partner co-brand doubles as an outbound link. Absent → plain heading. media (distinct from header_media) is a centred section illustration above the pillar grid in the card variants, or the left-column image in media-left.

Variants: 3-up · 4-up · media-left
Funnel stages: EXPLORING, TRYING
Surfaces: website, gen-ui, lead-magnets, slides
Orchestration: docs/TEMPLATE-REGISTRY.md#FeaturePillarsTemplate

StepCardsTemplate

Purpose. The named plan — sequential, verb-led steps. Primary plan carrier.
Grid pattern. Column span is count-driven (PATTERNS.md §15 / cardSpanClass), not fixed by the variant name:

• 3-step → 3-up grid (4+4+4): three .wn-col-4 cards
• 4-step → 2×2 grid (6+6 / 6+6): four .wn-col-6 cards in two balanced rows — never four-across or an unbalanced 3 + 1

Each step card renders a brand-yellow numbered circle chip (.step__number, 28px) top-aligned with the <h3>. See PATTERNS.md §10.

intro vs body (subtitle vs body text): intro is the section subtitle — rendered centred and italic (.step-cards__intro), per the subtitle rule (PATTERNS §11). body is an optional normal (upright) body paragraph beneath the subtitle (.step-cards__body) — use it for detail copy that should read as plain prose, not a second subtitle. When both are present the subtitle→body gap tightens and the large gap sits below the body. Don't put detail copy in intro (it will be italicised as a subtitle) and don't put a subtitle in body.

quote_intro slot: renders a <blockquote> above the step cards. Use for a named-customer quote that frames the plan — the quote must have an attribution. Do not use for marketing framing; that belongs in intro (plain text).

Variants: 3-step · 4-step
Funnel stages: EXPLORING, TRYING
Surfaces: website, gen-ui, lead-magnets, slides
Orchestration: docs/TEMPLATE-REGISTRY.md#StepCardsTemplate

DiagramExplainerTemplate

Purpose. Present a process/architecture diagram as the section centrepiece — heading + AEO answer-capsule above, a large centred diagram in the middle, explanatory prose below. For explainer sections where the visual carries the load and demands room (e.g. the five-step data pipeline). Added 2026-05-29. Grid pattern. Heading + capsule and body in .wn-col-8-centred; the diagram in a full-width centred <figure> (max-width 960px). Section padding: --space-2xl-3xl (generous).

Variants: centered Funnel stages: EXPLORING, TRYING Surfaces: website, gen-ui Orchestration: docs/TEMPLATE-REGISTRY.md#DiagramExplainerTemplate

OutcomesBandTemplate

Purpose. A "what you'll take away" panel — a contained brand-blue card listing the concrete outcomes a reader gets, as a tick list. Incentivises the read, front-loads the value, and is server-rendered HTML (SEO/AEO-friendly). The brand-blue is a contained panel (element accent), never a full-bleed section wash (DESIGN §2). Off-black text + ticks for contrast. Use near the top of long content/lead-magnet pages (e.g. the C-rating playbook). Added 2026-06-18. Grid pattern. A centred panel in .wn-container; the outcomes render as a 2-column tick list (1-column ≤768px).

Variants: blue-panel Funnel stages: EXPLORING, TRYING Surfaces: website Orchestration: docs/TEMPLATE-REGISTRY.md#OutcomesBandTemplate

FrameworkLayersTemplate

Purpose. A sequence of framework layers/pillars where each layer carries richer labelled structure than a single StepSlot body — a numbered heading, an intro, an optional verbatim quote, and labelled sub-blocks (e.g. "In practice at C1"). For teaching a multi-part model where each part needs evidence + a self-check, not just a one-line description (e.g. the C-rating playbook's "four pillars the regulator keeps naming"). Distinct from FeaturePillarsTemplate (whose pillars are heading + body only — no per-pillar quote or evidence blocks) and from StepCardsTemplate (sequential plan, not an evidenced model). Documented 2026-06-18 — was wired in code (schema.ts + contracts + fragment) and live on the playbook pages but never added to this vocabulary; formalised during the c-rating-playbook full-pipeline rebuild. Grid pattern. Full-width alternating rows — each layer is a row with the labelled sub-blocks; .wn-col-* per the fragment.

Each framework_layer item: number_label, heading, intro, optional quote (verbatim), blocks (list of {label, body}).

Variants: alternating · sticky-nav

• alternating — full-width rows, illustration alternating sides.
• sticky-nav (added 2026-06-18) — a sticky left sub-nav (the layer names) beside the layers stacked on the right, with a scroll-spy active state that tracks progress through a long multi-part section. All layer content is server-rendered (AEO: nothing hidden); the highlight is progressive enhancement via IntersectionObserver and degrades to a plain anchor list with no JS. Supports one per-layer banner image at the top of each layer (the banner-shaped separator slot is preferred, falling back to image_top/image), sized to the content column via .framework-sticky__layer-image; layers with no image render text-only (e.g. the C-rating four pillars). Active accent is brand-blue (yellow stays reserved for the one primary CTA). On mobile the nav collapses to a horizontal numbered progress strip. Use for a long teach-the-model section (e.g. the C-rating four pillars) where readers need a "you are here" cue.

Funnel stages: EXPLORING, TRYING Surfaces: website Orchestration: docs/TEMPLATE-REGISTRY.md#FrameworkLayersTemplate

PathwayCardsTemplate

Purpose. Routes different personas or segments to deeper pages. Each card is a self-contained CTA.
Grid pattern.

• 3-up → 3-up grid (4+4+4): three .wn-col-4 cards
• 2-up → 2-up grid (6+6): two .wn-col-6 cards

Variants: 3-up · 2-up
Funnel stages: EXPLORING (primary), TRYING
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#PathwayCardsTemplate

ProofOutcomeTemplate

Purpose. Success vision + named proof point — shows what winning looks like.
Grid pattern. Asymmetric (7+5): text + outcome left (.wn-col-7), verbatim aside right (.wn-col-5) — or flipped per variant.
Stat requirement: verbatim or body slot must carry ≥1 specific number tied to a named customer or sector. Flag [STAT REQUIRED] if absent at brief time; sourcing before publication is mandatory.

Variants: text-left-aside-right · text-right-aside-left
Funnel stages: TRYING (primary), COMMITMENT
Surfaces: website, gen-ui, lead-magnets, slides
Orchestration: docs/TEMPLATE-REGISTRY.md#ProofOutcomeTemplate

MediaTextSplitTemplate

Purpose. A feature image (typically a portrait photograph — the team, an office, people) beside a column of prose. The asymmetric counterpart to ProofOutcomeTemplate: where ProofOutcome's narrow side is a customer-quote stat panel, this template's narrow side is a real image, and all the text (eyebrow + heading + answer-capsule + body + CTA) lives in the wide column. Use it for the human/partnership moments a quote panel can't carry — e.g. the platform page's "A team of experts behind you" section, which never had a sourced quote and reads better with a photo of the Nerds. Added 2026-06-19. Distinct from ProofOutcomeTemplate (narrow side = verbatim stat panel, not an image) and from IntegrationCalloutTemplate media-left (8+4, integration/ecosystem semantics, small framed media + CTA-under-image).
Grid pattern. Asymmetric (7+5): image .wn-col-5, copy .wn-col-7. image-left = figure first (image on the left); image-right = copy first (image on the right). Columns are vertically centred. Image renders full-column-width with --wn-radius-card + --wn-shadow-card; on mobile both variants stack image-above-copy.
Section padding: --space-2xl (72→80px) standard.

Image sizing. The .wn-col-5 column displays at ≈480px wide at the 1280px container max. Supply the source at ~2× (≥960px wide) for retina sharpness; any aspect ratio works (the <img> keeps its natural ratio). Portrait suits the narrow column best.

Variants: image-left · image-right
Funnel stages: all
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#MediaTextSplitTemplate

IntegrationCalloutTemplate

Purpose. Integration and ecosystem hook — surfaces Open data approach and Power BI capability concretely.
Grid pattern. Wide + narrow (8+4): main content left (.wn-col-8), media/callout right (.wn-col-4).

Variants: dark · light
Funnel stages: EXPLORING (preview), TRYING (depth)
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#IntegrationCalloutTemplate

FAQTemplate

Purpose. Populates FAQPage JSON-LD. Answers questions an AI engine will be asked about Wordnerds.
Grid pattern.

• single-column → content in .wn-col-10-centred (editorial width)
• two-column → even split (6+6) with items distributed across columns

Q1 voice rule: FAQ Q1 ("What is Wordnerds?") uses the third-person entity-assertion answer per the entity-assertion sub-rule in 03-constraints.md. Q2 onwards uses first-person plural per voice-by-subject.

Variants: single-column · two-column
Funnel stages: EXPLORING, TRYING (mandatory on both)
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#FAQTemplate

FooterCTATemplate

Purpose. Final conversion moment for scroll-through visitors.
Grid pattern. Full bleed (12-col). Content centred in .wn-col-8-centred.
Section padding: --space-2xl-3xl (72→120px) — generous to give the CTA room.

Variants: yellow · dark · light
Funnel stages: all
Surfaces: website, gen-ui, lead-magnets
Orchestration: docs/TEMPLATE-REGISTRY.md#FooterCTATemplate

PromoBandTemplate

Purpose. Single timely promotional callout — webinar, playbook, case study. Swappable per campaign without touching the rest of the page.
Grid pattern. Full bleed (12-col). Content in .wn-container (1280px), horizontally arranged. With the media slot: a wide + narrow split (8+4) — a portrait image fills the left column (.wn-col-4 .promo-band__media) and the copy + CTAs sit on the right (.wn-col-8), mirroring the self-assessment worksheet band. The split fires whenever media is present, independent of the colour variant.
Configuration: remove from schema when no active promotion; re-add at campaign launch. Do not leave empty.

The kicker is the eyebrow — .promo-band__kicker is aliased to .eyebrow (PATTERNS §17), so a promo kicker matches a section eyebrow exactly. primary_cta defaults to the yellow CTA; set an explicit style on both CTAs to render an evergreen router band as two equal-weight ghost routes instead.

Variants: accent (brand-yellow — time-sensitive) · light (neutral — evergreen). Colour is set by the variant; the media slot (not the variant) controls the media-left layout.
Funnel stages: EXPLORING (primary), TRYING
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#PromoBandTemplate

ResourcesRowTemplate

Purpose. Horizontal content-discovery — latest blog, playbook, and optionally webinar titles. Serves consideration-stage visitors going deeper.
Grid pattern.

• 2-col → 2-up (6+6): two .wn-col-6 columns
• 3-col → 3-up (4+4+4): three .wn-col-4 columns

Measurement note: treat as a testable hypothesis. Measure column-level clicks; drop if traffic doesn't justify the space.

Each resource_column item: heading (text), items (list of {label, href}), optional cta_label + cta_href.

Variants: 2-col · 3-col
Funnel stages: TRYING (primary), INTEGRATING
Surfaces: website only (content-index pattern — not appropriate for gen-ui lead pages)
Orchestration: docs/TEMPLATE-REGISTRY.md#ResourcesRowTemplate

ResourceCardsTemplate

Purpose. The drop-in "Useful resources" band — one visual card per content source (image + type kicker + title + excerpt), each linking to the piece plus a "see all" arrow link to that content type's hub (/blog, /cx-corner, /playbooks). Cards are populated at build time from the content manifests (site/blogs-index.json, site/cx-corner-index.json, site/playbooks-index.json via lib/resources.ts + scripts/build.ts injectResourceCards) — leave cards empty in the schema and the band self-updates with the latest content on every rebuild. This is the card-led successor to ResourcesRowTemplate's text-link columns; drop it on any page that should route visitors into the content library. Renders nothing if all manifests are empty. Added 2026-06-11. Grid pattern. Cards in .wn-grid; column span is count-driven via the PATTERNS §15 card-span rule (cardSpanClass — 3 cards → .wn-col-4).

resource_card item: kicker (content-type label), title, href, optional excerpt, illustration (image src), hub_label + hub_href (the "see all" arrow link). Hand-authoring cards is possible (a non-empty list suppresses injection) but the default is the build-injected latest-mix: newest blog post + newest CX Corner issue + newest playbook.

Variants: latest-mix
Funnel stages: TRYING (primary), INTEGRATING
Surfaces: website only (content-index pattern — not appropriate for gen-ui lead pages)
Orchestration: docs/TEMPLATE-REGISTRY.md#ResourceCardsTemplate

TestimonialPairTemplate

Purpose. Two (or more) real customer quotes side by side — a social-proof band for evaluation/commitment surfaces (e.g. the book-a-diagnostic page). Each quote renders in the canonical blockquote card (PATTERNS §3: white card, yellow top border, <mark> behind the quote text, plain <cite>). Quotes only — never marketing framing (that is .answer-capsule's job). Added 2026-06-02. Grid pattern. 2-up (6+6): each verbatim spans .wn-col-6. Equal-height cards; attribution pinned to the bottom of each card. Section padding: --space-2xl (72→80px) standard.

Variants: 2-up
Funnel stages: TRYING, COMMITMENT
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#TestimonialPairTemplate

PricingTiersTemplate

Purpose. The pricing page's signature device — a row of priced subscription tiers, each a self-contained card (tier name, real price, who-it's-for, headline volume, distinctive inclusions, CTA). Real prices are the asset: the renderer derives Product + Offer JSON-LD from the tiers, a distinctive AEO surface most VoC competitors can't publish (they gate pricing behind "contact sales"). Added 2026-06-05 for the /pricing page. Deliberate inverse of /consultancy, which carries no priced tiers. Grid pattern. 3-up (4+4+4): each tier spans .wn-col-4. Equal-height cards; CTA pinned to the bottom of each card. (Per PATTERNS §15, three cards → wn-col-4.) Section padding: --space-2xl (72→80px) standard. Default tone light-alt (grey) so the white tier cards pop.

Each pricing_tier item: name (text), price (display string, e.g. "£26,400"), optional price_prefix ("from") + price_period ("per year"), audience (text), optional volume (headline metric), features (string list), cta_label + cta_href, optional featured (boolean).

agent_pricing_link (machine-readable pricing pointer, added 2026-06-30). An optional link slot rendered as a quiet .cta-secondary line beneath the footnote — the "are you an AI agent? see pricing" pattern. It points agentic buyers at the build-generated machine-readable /pricing.md (a flat markdown table of every Wordnerds price — subscription + PoC + consultancy — that an LLM parses far more reliably than the styled HTML tier grid). Populate it on the canonical pricing sections (/pricing plans, /consultancy consultancy-pricing); leave it off secondary bands so there is one agent link per page. /pricing.md is regenerated from the pricing + consultancy schemas on every build (writePricingMd in scripts/build.ts), so it can never drift from the live prices.

Featured-tier rule. Exactly one tier may set featured: true. The featured card gets an off-black active-state accent (2px border + elevation + "Most popular" badge) and the single brand-yellow primary CTA on the surface; non-featured tiers render ghost CTAs. This honours the one-yellow-element-per-surface rule (DESIGN §2) — feature ticks are neutral, never yellow.

Variants: 3-up
Funnel stages: TRYING, COMMITMENT
Surfaces: website, gen-ui
Orchestration: docs/TEMPLATE-REGISTRY.md#PricingTiersTemplate

Webinar templates

The webinar-page vocabulary (transcript pages at /webinars/<slug>/transcript + the /webinars listings page). Added 2026-06-04. JSON-LD: a page carrying a WebinarVideoTemplate emits VideoObject + Article + Person[] (from PresentersTemplate) + ItemList (from RelatedWebinarsTemplate), generated in lib/renderer.ts (gated on the WebinarVideoTemplate's presence — mirrors the FAQ→FAQPage pattern). Set page.context.page_type: "webinar".

WebinarVideoTemplate

Purpose. The webinar recording. A privacy-friendly click-to-load YouTube facade (a lazy i.ytimg.com poster + play button; on click it injects a youtube-nocookie.com iframe) — keeps the page light and sets no tracking cookies until play. Framed by a heading + optional AEO answer-capsule, with a duration caption below. Grid pattern. Heading/capsule in .wn-col-8-centred; the embed in a full-width centred <figure> capped at 900px, aspect-ratio: 16 / 9.

video slot: provider (youtube), video_id, title, duration_minutes, optional upload_date, description. Caption defaults to Duration: {N} minutes. if absent.

Variants: embedded
Funnel stages: EXPLORING, TRYING
Surfaces: website

VideoBandTemplate

Purpose. A standalone marketing video band — a "see it in a few minutes" moment on any marketing page (e.g. a sector landing page), distinct from WebinarVideoTemplate (which is the recording on a /webinars transcript page). Reuses the same privacy-friendly click-to-load YouTube facade and the same .webinar-video__* CSS, so it's visually consistent and adds no new styling. Added 2026-06-11 for the /sectors/travel-and-hospitality page. JSON-LD: the renderer emits a standalone VideoObject gated on this template's presence — and deliberately not the webinar-only Article / Person[] / ItemList (so a marketing page that embeds a video isn't misrepresented as a webinar/article). Place it as its own band, typically immediately after the hero. Caption is optional (no enforced duration line, unlike the webinar template). Grid pattern. Heading/capsule in .wn-col-10-centred; the embed in a centred <figure>, aspect-ratio: 16 / 9 (reuses .webinar-video__figure).

video slot: same shape as WebinarVideoTemplate — provider (youtube), video_id, title, duration_minutes (→ VideoObject.duration, rounded to whole minutes), optional upload_date, description.

Variants: embedded
Funnel stages: all
Surfaces: website, gen-ui

DemoBandTemplate

Purpose. A standalone interactive product-demo band — a Storylane guided walkthrough embedded as a "see it for yourself" moment (e.g. the homepage band the hero's transitional CTA targets). Same privacy discipline as the YouTube facade (PATTERNS §16.1): a click-to-load facade — a local poster image + brand-yellow labelled launch lozenge; the Storylane iframe (and any third-party JS/cookies) loads only on click. A labelled lozenge, not a play triangle: this is a click-through tour, not a video. The answer_capsule + caption are server-rendered so the AEO value lives in our HTML (iframe content is invisible to crawlers). JSON-LD: none emitted (an interactive demo is not a VideoObject — do not misrepresent it as one). Added 2026-06-11 for the homepage. Grid pattern. Heading/capsule in .wn-col-10-centred; the facade in a centred 16:9 <figure> (reuses .webinar-video__figure).

demo slot: href = the Storylane embed URL (https://app.storylane.io/demo/<id>?embed=inline), label = the accessible demo title. poster must be a local image (no third-party request before opt-in).

Variants: storylane Funnel stages: EXPLORING, TRYING Surfaces: website, gen-ui

PresentersTemplate

Purpose. The webinar's presenters — one card each (optional headshot, name, title — org, one-paragraph bio). Feeds the Person[] JSON-LD. Grid pattern. grid → balanced card span via the §15 card-grid rule (2/4 → 6+6, 3 → 4+4+4); stacked → .wn-col-8-centred rows.

Each presenter item: name, title, org, bio, optional headshot (image; placeholder srcs render as a labelled box for later backfill).

Variants: grid · stacked
Funnel stages: EXPLORING, TRYING
Surfaces: website

TranscriptTemplate

Purpose. The full speaker-labelled transcript, rendered server-side (AI crawlers don't execute JS — the text must be in the HTML). Segments are either an editorial section heading (<h3>) or a speaker turn (first paragraph carries a bold speaker label). Grid pattern. .wn-col-8-centred editorial column inside .wn-container--narrow for line length.

transcript slot: segments — a list of {type:"section", heading} or {type:"turn", speaker, paragraphs[]}.

Variants: full (inline) · disclosure (native <details> — still server-rendered, just folded)
Funnel stages: EXPLORING, TRYING
Surfaces: website

RelatedWebinarsTemplate

Purpose. The "See other webinars" cross-link module (every transcript page) and the /webinars listings page. Cards are populated at build time from site/webinars-index.json via scripts/build.ts (injectWebinarCards) — leave cards empty in the schema. Renders nothing if there are no cards. Grid pattern. related-row → up to 3 cards, 3-up grid; sector-grouped → cards under sector headings (full listing).

webinar_card item: title, one_liner, date_recorded, duration_minutes, sector, href, optional youtube_id (card thumbnail). The data source is mirrored from wordnerds-wiki/data/webinars-index.yaml via npm run sync:webinars.

Variants: related-row · sector-grouped
Funnel stages: TRYING, INTEGRATING
Surfaces: website