Section catalogue

An interior page is a hero plus an ordered list of sections. You compose a page by listing sections in content/pages.json; you do not write HTML. This is the complete list of what you can list.

"mandate": {
  "title": "The sovereign mandate",
  "description": "Shown in search results and link previews.",
  "hero": { "eyebrow": "Board Memorandum", "h1": "...", "lead": "..." },
  "sections": [
    { "type": "metrics", "tone": "subtle", "items": [ ... ] },
    { "type": "richtext", "columns": [ ... ] }
  ]
}

Add a key under pages, link to /<key>.html from site.json's nav, and the page exists in all four formats.

Fields every section understands

Field	Applies to	Effect
type	all	Which section this is. Required.
tone	most	The band's background: surface, subtle or dark. Omit for the page default. dark also switches the text, links and form fields to their on-dark treatment.
eyebrow	most	Small uppercase label above the heading.
heading	most	The section's heading.

tone: "dark" is the one to be careful with. It is a full-width dark band, and two of them in a row read as one long block, so the demo alternates.

The seventeen types

Text and layout

type	Renders	Fields
richtext	Two or more prose columns	columns[] of { eyebrow, heading, body }
cta	Call-to-action band	heading, lead, cta_primary, cta_secondary, tone
include	Embeds a home-page section	ref: one of science, partners, contact

include exists so a section that already says the right thing on the home page is not written twice. Edit it once in home.json and both places change.

Numbers

type	Renders	Item fields
metrics	A row of count-up figures	count, suffix, separator, eyebrow, label
kpi-wide	Wider KPI cards with progress bars	count, prefix, suffix, separator, eyebrow, label, sublabel, progress

count values animate up from zero when scrolled into view. separator inserts a thousands separator; prefix and suffix wrap the number without becoming part of it, so a currency or a percent sign does not get animated. progress is a percentage and draws the bar.

Cards and lists

type	Renders	Item fields
cards	Icon, heading and body cards	icon, title, body
features	Feature blocks with bullet lists	eyebrow, title, body, points[]
values	Numbered value or pillar cards	num, title, body
flow	Numbered stage diagram	num, name, desc
resources	Download cards	title, desc, href
jobs	Job listing rows	title, dept, loc, type, href
faq	Disclosure list	q, a
testimonials	Quote cards	quote, name, role, org

Available icon names: box, cell, chart, doc, flask, pulse, shield. They are inline SVG in the stylesheet, not an icon font and not a network request. An unrecognised name renders nothing rather than a broken glyph.

News

type	Renders	Item fields
feed	Compact list of articles	tag, title, date, href
featured	One highlighted article	tag, title, excerpt, date, cta, tone

These list articles; they do not create them. Adding a markdown article does not put it in a feed automatically. See "one caveat worth knowing" in the four formats.

Collections

type	Renders	Reads from
team	Leadership grid	collections.json, leadership

team takes no items of its own. It renders whatever is in the collection, so you edit people in one place and every page showing them follows.

Interactive apps

type	Field	Effect
app	name	Drops in one of the bespoke interactive components

Available names: venn, scada, igg, gantt, command-center, audit-ledger, dfi-dashboard, waterfall.

Each is a pair of files, markup/apps/<name>.html and, where it needs script, js/apps/<name>.js. The build discovers them by scanning that folder, so adding your own app is a matter of dropping in the two files and referencing the name. An unknown name renders an HTML comment rather than failing the build, which keeps a typo from taking a page down.

needs lists heavier runtimes the app requires, currently three and orbitcontrols. Only the pages that use them load them, so a page without 3D pays nothing for the ones that have it.

Working out which to use

Reach for cards when the items are peers, values or flow when they are ordered, features when each item needs its own bullet list, and richtext when it is genuinely prose. If a section only exists to carry one number, use metrics rather than a heading and a paragraph.

If none of the seventeen fits, that is a markup change rather than a content change. See architecture for where that work goes, and expect to write one partial and one stylesheet rule.