PageContainer

PageContainer sets a standardized max width and horizontal padding for page content. It centers itself horizontally when exceeding the maxWidth and applies responsive padding.

Use it to wrap page-level content that should follow the standard content width. For full-bleed sections, simply omit the wrapper.

Import

import { PageContainer } from '@hoverinc/design-system-react-web';

Usage

The following example shows how PageContainer constrains wide content to a standard max width with horizontal padding:

live

<PageContainer bg="primary.100">
  <Box bg="primary.50" padding="400">
    <Body>
      With PageContainer — this content is constrained to the standard max width
      and centered with responsive horizontal padding.
    </Body>
  </Box>
</PageContainer>

Overriding styles

PageContainer extends Box, so you can pass any BoxProps to override defaults:

live

<PageContainer paddingX="400" maxWidth="800px" bg="primary.50">
  <Box padding="400">
    <Body>
      This content uses a narrower max width and tighter padding than the
      default PageContainer, useful for focused reading layouts.
    </Body>
  </Box>
</PageContainer>

Defaults

Property	Value
`marginX`	`auto`
`maxWidth`	`breakpoints.width500`
`paddingX`	`500` (base), `800` (tablet+)
`width`	`100%`

Pictogram