Showcase

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

Description for the model

Cards that each open something live (demo sites), with a colour swatch, facts and two buttons.

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": "Showcase",
  "props": {
    "eyebrow": "Demos",
    "title": "See it live",
    "items": [
      {
        "title": "The Coffee Atlas",
        "text": "A tactile, editorial tenant.",
        "theme": "coffee",
        "facts": [
          {
            "label": "Lessons",
            "value": "12"
          },
          {
            "label": "Time",
            "value": "3 h"
          }
        ],
        "primary": {
          "label": "Open the demo",
          "href": "https://coffee.example.com"
        }
      },
      {
        "title": "On-call drills",
        "text": "A dark, console-style tenant.",
        "theme": "oncall",
        "primary": {
          "label": "Open the demo",
          "href": "https://oncall.example.com"
        },
        "secondary": {
          "label": "Read the story",
          "href": "/stories/oncall"
        }
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
note	string		Small note under the cards. max length 200
items	array of objects	yes	Cards. min 1 items, max 6 items
items[].title	string	yes	Card title. max length 80
items[].text	string		Sentence. max length 300
items[].theme	"coffee" | "oncall" | "nightsky" | "gravity" | "poland" | "ulam" | "platform"		Colour swatch of the card
items[].facts	array of objects		Facts. max 4 items
items[].facts[].label	string	yes	Label. max length 30
items[].facts[].value	string	yes	Value. max length 40
items[].image	object		An image with explicit size (prevents layout shift)
items[].image.src	string (href)	yes	Image URL (local /images/… or the tenant storage). max length 2048
items[].image.alt	string	yes	Text alternative; empty string only for decorative images. max length 300
items[].image.width	integer	yes	Intrinsic width in px. ≥ 1
items[].image.height	integer	yes	Intrinsic height in px. ≥ 1
items[].primary	object	yes	A link or call to action
items[].primary.label	string	yes	Visible text. max length 80
items[].primary.href	string (href)	yes	Target URL. max length 2048
items[].secondary	object		A link or call to action
items[].secondary.label	string	yes	Visible text. max length 80
items[].secondary.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.

See it live
The Coffee Atlas
On-call drills

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).

{
  "items": "demos"
}

Issues:

• /items expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 23 rules passed, 0 violations, 1 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.