Container

import { Container } from "@ps1ui/core";

Sizes

<Container size="sm">max-width 40rem</Container>
<Container size="md">max-width 48rem</Container>
<Container size="full">unbounded</Container>

Responsive padding

<Container size="sm" px={{ base: "md", md: "2xl" }}>
  Horizontal padding scales with the container width.
</Container>

Semantic element

A Container usually wraps the page's own content region, so it is normally a landmark: <main>, a <section>, the<footer>. Pass as to render that tag instead of the default <div> rather than layering a role onto it.

The centering, max-width cap, padding and queryContainer behave identically on any tag; the rendered element's own attributes (and a correctly typed ref) become available, and as also accepts a component rather than a tag name.

A document may only have one <main>, and this page is already inside the site layout's — so the example below uses as="section". On a real page the outermost Container is usually the <main> itself.

As a landmark element

<Container as="section" size="md" aria-label="Pricing">
  Section content, centered and capped at 48rem.
</Container>

Query container

Responsive props resolve against the nearest ancestor that is a container-query context — normally the PS1Root wrapping your app. Pass queryContainer to make aContainer that context instead, so its descendants respond to that Container's own width rather than the page's.

It is opt-in because container-type: inline-size erases the element's intrinsic width. width: 100% keeps Container upright in most parents, but as an item of an auto-sized grid track it still collapses to zero — give it a definite inline size whenever you turn it on.

Query container

{/* The inner Container now measures the 320px outer
    Container instead of the page, so it stays on its `base` padding. */}
<Container queryContainer size="full" px="none" style={{ width: 320 }}>
  <Container px={{ base: "none", md: "2xl" }}>
    Padding flips at the md container breakpoint.
  </Container>
</Container>

Props