Quotes

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

Description for the model

Testimonials. Only quote people from the data model or source material, never invent them. pull = large serif quote; log = timestamped log lines; bubbles = playful cards.

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": "Quotes",
  "props": {
    "variant": "pull",
    "eyebrow": "Learners",
    "title": "What they say",
    "items": [
      {
        "quote": "My espresso stopped tasting sour in a week.",
        "author": "Maya, home barista"
      },
      {
        "quote": "The practice challenges were exactly the right size.",
        "author": "Tom, cafe owner"
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
variant	"pull" | "log" | "bubbles"		Layout. default "pull"
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
items	array of objects	yes	Quotes. max 8 items
items[].quote	string	yes	Quote. max length 400
items[].author	string	yes	Who said it. max length 120
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.

What they say
My espresso stopped tasting sour in a week.
The practice challenges were exactly the right size.

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": "great"
}

Issues:

• /items expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 20 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.