Overview

SinglePane is a layout primitive, not a canonical M3 pattern with its own spec page — it's the plumbing every other pane and every docs page in this library is built on top of. This docs site dogfoods it directly: every /docs/** page (including this one) wraps its main snippet content in a bare <SinglePane>, relying on its default max-width and padding instead of hand-rolling mx-auto max-w-* p-* classes per route.

Two width mechanisms stack: the outer wrapper always caps at max-w-7xl, and the centered prop optionally caps further (narrow → max-w-2xl, medium → max-w-5xl) for prose-style content that reads better at a tighter measure.

Import

import { SinglePane } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

Basic Usage

Wrap page-level content directly — no other configuration is required for the common case:

<script lang="ts">
  import { SinglePane } from '@noxlovette/material';
</script>

<SinglePane centered="medium">
  <h1>Page title</h1>
  <p>Body content, capped at max-w-5xl and centered.</p>
</SinglePane>

SinglePane Props

Accessibility