MainContent

The scrolling main column, the target of the skip link. Pick width wide for boards and tables, full for editors.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Paragraph 1. The column scrolls on its own while the bars stay put.

Paragraph 2. The column scrolls on its own while the bars stay put.

Paragraph 3. The column scrolls on its own while the bars stay put.

Paragraph 4. The column scrolls on its own while the bars stay put.

Paragraph 5. The column scrolls on its own while the bars stay put.

Paragraph 6. The column scrolls on its own while the bars stay put.

Paragraph 1. The column scrolls on its own while the bars stay put.

Paragraph 2. The column scrolls on its own while the bars stay put.

Paragraph 3. The column scrolls on its own while the bars stay put.

Paragraph 4. The column scrolls on its own while the bars stay put.

Paragraph 5. The column scrolls on its own while the bars stay put.

Paragraph 6. The column scrolls on its own while the bars stay put.

Paragraph 1. The column scrolls on its own while the bars stay put.

Paragraph 2. The column scrolls on its own while the bars stay put.

Paragraph 3. The column scrolls on its own while the bars stay put.

Paragraph 4. The column scrolls on its own while the bars stay put.

Paragraph 5. The column scrolls on its own while the bars stay put.

Paragraph 6. The column scrolls on its own while the bars stay put.

tsx

import { MainContent } from '@skribly/ui/shell'

tsx

<MainContent width="wide">
  <PageHeader title="Board" />
  …
</MainContent>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

The main landmark, with tabindex -1 so the skip link can move focus into it, and a tab stop while its content overflows, so the keyboard can scroll text with nothing focusable in it; its ring shows only for keyboard focus.
Padding grows with the layout, and the scrollbar gutter is kept stable so content does not jump.

This demo runs through axe in all three themes on every test run. See what the tests check.