People

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

Description for the model

Instructor cards with portrait, role and a short bio.

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": "People",
  "props": {
    "eyebrow": "Teachers",
    "title": "Who teaches you",
    "intro": "Working roasters and baristas.",
    "people": [
      {
        "name": "Ada Kowalska",
        "role": "Head roaster",
        "place": "Krakow",
        "bio": "Fifteen years of roasting and teaching extraction."
      },
      {
        "name": "Jan Nowak",
        "role": "Barista trainer",
        "place": "Gdansk"
      }
    ]
  }
}

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
people	array of objects	yes	People. min 1 items, max 8 items
people[].name	string	yes	Full name. max length 80
people[].role	string		Role or title. max length 80
people[].place	string		Place. max length 80
people[].bio	string		Short bio. max length 600
people[].image	object		An image with explicit size (prevents layout shift)
people[].image.src	string (href)	yes	Image URL (local /images/… or the tenant storage). max length 2048
people[].image.alt	string	yes	Text alternative; empty string only for decorative images. max length 300
people[].image.width	integer	yes	Intrinsic width in px. ≥ 1
people[].image.height	integer	yes	Intrinsic height in px. ≥ 1
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.

Who teaches you
Ada Kowalska
Jan Nowak

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

{
  "people": "nobody"
}

Issues:

• /people expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

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