FeatureIndex

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

Description for the model

Everything the product does, grouped and collapsed by default: one native disclosure per group with short feature lines, status badges and links to the package docs (no JavaScript, content stays in the HTML for search engines). Emits ItemList JSON-LD. Use it for a long, honest capability list, not for the three-to-six headline benefits (FeatureList).

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": "FeatureIndex",
  "props": {
    "id": "features",
    "eyebrow": "everything",
    "title": "Everything it does",
    "intro": "Every line links to the package that implements it.",
    "groups": [
      {
        "id": "media",
        "title": "Media pipeline",
        "summary": "Upload once, deliver everywhere.",
        "items": [
          {
            "title": "Video to HLS",
            "text": "A queued ffmpeg job turns an upload into an adaptive stream.",
            "packages": [
              "video"
            ],
            "status": "available"
          }
        ]
      },
      {
        "id": "h5p",
        "title": "H5P content types",
        "tags": [
          "Accordion",
          "Crossword"
        ]
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "features"
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
docsBase	string (href)		Docs site root; a package name links to <docsBase>/reference/packages/<name>/. max length 2048
jsonLd	boolean		Emit schema.org ItemList JSON-LD of the groups and features. default true
groups	array of objects	yes	Groups. min 1 items, max 16 items
groups[].id	string	yes	Group anchor id. max length 40
groups[].title	string	yes	Group title. max length 80
groups[].summary	string		One sentence under the title when the group is open. max length 300
groups[].items	array of objects		Features. max 14 items
groups[].items[].title	string	yes	Feature. max length 80
groups[].items[].text	string		What it does, in one or two sentences. max length 320
groups[].items[].packages	array of string		Packages that implement it. max 6 items
groups[].items[].href	string (href)		Docs page for the feature. max length 2048
groups[].items[].status	"available" | "coming" | "preview"		Shipped today, on the roadmap or off by default (say so honestly). default "available"
groups[].tags	array of string		Short names shown as a tag cloud (for example the content types of a standard). max 80 items

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Everything it does
Every line links to the package that implements it.
Media pipeline
H5P content types

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

{
  "groups": [
    {
      "title": "No id"
    }
  ]
}

Issues:

• /groups/0/id is required

Rendered as:

No id

Accessibility

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