Main

Example#

A page has exactly one main landmark, so this one shows as code rather than live inside the docs page's own.

import { Main } from "@maxgrits/overprint-react/main";

<SkipLink />
<Navbar items={items} />
<Main>
  <PageHero title="Websites that win customers." />
</Main>

Usage#

Every page has one Main around its primary content, after the navbar and before the footer. It is the target of the SkipLink, so keyboard users can jump past the header.

• One per page. A page with two main landmarks confuses screen readers; the docs show it as code for that reason.
• Focus. tabIndex={-1} lets the skip link move focus here without making it a tab stop; it shows no ring.
• Scrolling. Its scroll margin clears the sticky header, so a skipped-to page never starts under the bar.

Anatomy#

1. Main landmark: main#mk-main.mk-main, the skip link's target.
2. Content: the page's hero and sections, in reading order.

Volume#

Main prints nothing of its own, so it is the same at every volume.

Content#

• Everything that is the page's own content goes in it; repeated chrome (navbar, footer, the action dock) stays outside.

Do and don't#

<SkipLink />
<Navbar />
<Main>…</Main>
<Footer />

<Main>
  <Navbar />
  …
  <Footer />
</Main>

Accessibility#

• tabIndex={-1} lets the skip link move focus here; it shows no ring because it is not interactive.
• scroll-margin-top keeps it clear of the sticky header.

Props#

Tokens#

Changelog#