PixelContainer

Surface-aware page section wrapper with token-driven max-width, page gutter, and vertical rhythm.

  • Surface-aware tokens (pixel / linear)
  • Token-driven maxWidth, padding x (gutter), and padding y (section rhythm)
  • Polymorphic as for semantic landmarks (section, main, header, footer, article, aside, div); in Angular, the element you put pxlContainer on
  • Composes PixelCenter internally for consistent horizontal centering
  • SSR-safe, with no client state
Status
stable
Category
layout
Since
v1.6.0

API

import { PixelContainer } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
maxWidth'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'prose' | 'full''xl'Width cap of the inner column (containerWidth).
paddingContainerPadding—Vertical rhythm (sectionRhythm), or { x, y }: the gutter of the inner column (pageGutter) and the rhythm. Both default to lg.
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.
as'section' | 'main' | 'header' | 'footer' | 'article' | 'aside' | 'div''section'Element to render — a landmark wants an aria-label or aria-labelledby.

Also takes the native attributes and event handlers of its element (HTMLAttributes<HTMLElement>).

ref points to its element (HTMLElement).

Accessibility

WCAG target: 2.1 AA

  • semantic-section-wrapper

Inherits semantics from the as element (defaults to section). When rendered as a landmark, provide aria-label or aria-labelledby for an accessible name.

Usage

import { PixelContainer } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelContainer>
      <p className="text-sm text-retro-muted">Default container — section landmark, xl max-width, lg rhythm.</p>
    </PixelContainer>
  );
}

Examples

Default

import { PixelContainer } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelContainer>
      <p className="text-sm text-retro-muted">Default container — section landmark, xl max-width, lg rhythm.</p>
    </PixelContainer>
  );
}

Narrow

import { PixelContainer } from '@pxlkit/ui-kit';

export function Narrow() {
  return (
    <PixelContainer maxWidth="md" padding="md">
      <p className="text-sm text-retro-muted">Narrow container with md rhythm.</p>
    </PixelContainer>
  );
}

As Main

import { PixelContainer } from '@pxlkit/ui-kit';

export function AsMain() {
  return (
    <PixelContainer as="main" aria-label="Page content" maxWidth="2xl" padding={{ x: 'lg', y: 'xl' }}>
      <p className="text-sm text-retro-muted">Rendered as the main landmark with split padding.</p>
    </PixelContainer>
  );
}

Prose Width

import { PixelContainer } from '@pxlkit/ui-kit';

export function ProseWidth() {
  return (
    <PixelContainer maxWidth="prose" padding="sm">
      <p className="text-sm text-retro-muted">Prose-width container ideal for long-form reading.</p>
    </PixelContainer>
  );
}

Related