IndexHeader

Publishing · src/components/IndexHeader/IndexHeader.tsx

The top of an index: what this collection is, and how to narrow it.

The current topic carries aria-current="page" as well as its class, so somebody using a screen reader learns which filter is active. A highlight that exists only in colour tells them nothing.

The image is eager here, unlike everywhere else in the system: it is the first thing on the page, so lazy loading would only delay what the reader is already looking at.

Import

import { IndexHeader } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
title	React.ReactNode
lede	React.ReactNode
topics	IndexTopic[]
topicsLabel	string
image	PubImage	Loaded eagerly - it is the top of the page.
lang	string
className	string

Exported types

IndexTopic