Events

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

Description for the model

Upcoming live sessions (webinars) and in-person events. Dates come from the data model.

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": "Events",
  "props": {
    "variant": "cards",
    "eyebrow": "Events",
    "title": "Meet the teachers",
    "items": [
      {
        "kind": "webinar",
        "title": "Live dial-in session",
        "date": "12 Nov 2026, 18:00",
        "place": "Online",
        "text": "Bring your grinder and your worst shot.",
        "cta": {
          "label": "Reserve a seat",
          "href": "/events/1"
        }
      },
      {
        "kind": "in-person",
        "title": "Cupping night",
        "date": "20 Nov 2026",
        "place": "Krakow",
        "text": "Taste six origins side by side."
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
variant	"feature" | "cards"		feature = one large event with an image; cards = a row of cards. default "cards"
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
image	object		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		Image caption. max length 160
items	array of objects	yes	Events. max 4 items
items[].kind	"webinar" | "in-person" | "consultation"		Kind of event. default "webinar"
items[].title	string	yes	Event title. max length 120
items[].date	string (date-time)		ISO 8601 start. max length 40
items[].place	string		Place (in-person). max length 120
items[].text	string		One or two sentences. max length 400
items[].cta	object		A link or call to action
items[].cta.label	string	yes	Visible text. max length 80
items[].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.

Meet the teachers
Live dial-in session
Cupping night

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

Issues:

• /items expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

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