FeatureList

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

Description for the model

A short list of benefits or facts with icons (e.g. ‘For parents’, ‘For teams’).

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": "FeatureList",
  "props": {
    "variant": "tiles",
    "eyebrow": "Why ulams",
    "title": "Courses that stay current",
    "items": [
      {
        "icon": "sync",
        "title": "Living courses",
        "text": "Lessons update when the source changes."
      },
      {
        "icon": "shield",
        "title": "Cited content",
        "text": "Every claim links to its source."
      },
      {
        "icon": "puzzle",
        "title": "Adaptive practice",
        "text": "Challenges follow your level.",
        "status": "coming"
      }
    ],
    "cta": {
      "label": "Read more",
      "href": "/features"
    }
  }
}

Props

Prop	Type	Required	Notes
variant	"tiles" | "checks" | "grid"		tiles = icon cards; checks = compact checklist; grid = 3-column feature grid with glow. default "tiles"
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
items	array of objects	yes	Items. max 8 items
items[].icon	"check" | "arrow" | "play" | "clock" | "calendar" | "pin" | "users" | "mail" | "shield" | "star" | "moon" | "planet" | "telescope" | "rocket" | "medal" | "book" | "terminal" | "compass" | "sigma" | "pager" | "chart" | "print" | "lock" | "sync" | "quote" | "layers" | "server" | "puzzle" | "cart" | "code" | "sparkle" | "eye" | "chat"		Icon from the catalogue’s icon set
items[].title	string	yes	Title. max length 80
items[].text	string		Sentence. max length 240
items[].status	"available" | "coming"		Shipped today or on the roadmap (say so honestly). default "available"
cta	object		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.

Courses that stay current
Living courses
Cited content
Adaptive practice

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

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.