Landmark
Names a region of the page — header, navigation, main, sidebar, footer, search — so assistive technology can jump straight to it. Structure, not styling.
Basic usage
Install the package:
pnpm add @design-schema/react @design-schema/tokensImport the stylesheet once for the app, then the component:
import '@design-schema/tokens/calm-precise/css';
import '@design-schema/react/index.css';
import { Landmark } from '@design-schema/react';Examples
import { Landmark, Text } from '@design-schema/react';
<Landmark role="navigation" label="Main"><Text>Primary links.</Text></Landmark>Props
4 rows| Prop | Type | Default | Description |
|---|---|---|---|
| role required | banner | navigation | main | complementary | contentinfo | region | search | form | — | Which landmark this is. `banner` (site header), `navigation`, `main` (exactly one per page), `complementary` (sidebar), `contentinfo` (site footer), `region` (a labelled section that deserves a jump point), `search`, `form` (a labelled form that is a page-level region). |
| label | string | — | Accessible name. Required for `region` and `form`, and whenever the page has more than one landmark of the same role (two navigations: "Main" and "Footer"). Not shown visually. An empty string counts as absent (no aria-label, and missing for the warnings). `banner`, `main` and `contentinfo` never take a label: on web and Lit one passed to them is not rendered and a development warning says so. On React Native the label is applied only to `navigation`, `region` and `form`; on any other role it is silently not applied, with no warning. `search` and `complementary` do take a label on web and Lit, and a page with two of either needs one. Accessibility: Rendered as aria-label; the name is read together with the role ("Main navigation, landmark"). |
| children required | content | — | The region's content. |
| as | header | nav | main | aside | footer | section | form | div | — | Web element override. By default the element is chosen from `role` (see platform notes); set this only when the native element would be wrong, e.g. a `banner` that is not the page header. Web only — the Lit host is its own element. |
Accessibility
Decisions this component leaves to you
Choose the landmark role, and give it a name when the page has more than one landmark of that role.
Supply an accessible name. This component has no text of its own to fall back on, so without one a screen reader announces its role and nothing else.
ARIA role: set by the role prop, one of banner, navigation, main, complementary, contentinfo, region, search, form.
Anatomy
What generation guarantees
Landmark — It renders a landmark, so assistive technology can jump straight to it.
Accessible name — Every instance carries a programmatic name. Where the component has no text of its own to use, the name is a prop the consumer supplies.
This component declares no contrast pair of its own — it inherits the colour of whatever it is placed in — and it does not animate.