HeritageStory

section · static (no JavaScript) · no children. All components: component playground.

Description for the model

An editorial brand-origin story with an attributed portrait, sourced historical context, a separate product connection and a call to action. Never invent quotations or historical facts.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "HeritageStory",
  "props": {
    "id": "product",
    "eyebrow": "The thinking behind the name",
    "title": "Knowledge grows when we build it together.",
    "caption": "Stanisław Ulam · illustrated portrait",
    "paragraphs": [
      "In the cafés of Lwów, Stanisław Ulam and fellow mathematicians discussed problems and recorded them in a shared notebook: the Scottish Book. Questions, solutions and new ideas grew through collaboration.",
      "Ulam later translated the collection so it could reach more people, inviting readers to contribute corrections and further developments."
    ],
    "connection": "That spirit inspires ULAMS: turn your organisation’s documents into shared learning, work with people and agents, and keep improving the knowledge together. Open source, free to use and open to contribution.",
    "source": {
      "label": "The Scottish Book · Ulam’s preface, University of St Andrews",
      "href": "https://mathshistory.st-andrews.ac.uk/HistTopics/Scottish_Book/"
    },
    "cta": {
      "label": "Build with us on GitHub",
      "href": "https://github.com/ulams-dev/ulams"
    },
    "image": {
      "src": "/landing/ulam/stanislaw-ulam-stitch.png",
      "alt": "Stanisław Ulam",
      "width": 1024,
      "height": 1024
    }
  }
}

Props

Prop	Type	Required	Notes
eyebrow	string		Small label above the title. max length 80
title	string	yes	Section title. max length 160
image	object	yes	An image with explicit size (prevents layout shift)
image.src	string (href)	yes	Image URL (local /images/… or the tenant storage). max length 2048
image.alt	string	yes	Text alternative; empty string only for decorative images. max length 300
image.width	integer	yes	Intrinsic width in px. ≥ 1
image.height	integer	yes	Intrinsic height in px. ≥ 1
caption	string		Illustration caption. max length 160
paragraphs	array of string	yes	Historical context. min 1 items, max 3 items
connection	string	yes	How this history inspires the product. max length 600
source	object	yes	A link or call to action
source.label	string	yes	Visible text. max length 80
source.href	string (href)	yes	Target URL. max length 2048
cta	object	yes	A link or call to action
cta.label	string	yes	Visible text. max length 80
cta.href	string (href)	yes	Target URL. max length 2048
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Knowledge grows when we build it together.
In the cafés of Lwów, Stanisław Ulam and fellow mathematicians discussed problems and recorded them in a shared notebook: the Scottish Book. Questions, solutions and new ideas grew through collaboration.
Ulam later translated the collection so it could reach more people, inviting readers to contribute corrections and further developments.
That spirit inspires ULAMS: turn your organisation’s documents into shared learning, work with people and agents, and keep improving the knowledge together. Open source, free to use and open to contribution.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "paragraphs": "text"
}

Issues:

• /title is required
• /image is required
• /connection is required
• /source is required
• /cta is required

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 17 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.