Skip to content
Site volume
Colourway

Components

Container

The page width with a 16, 24 or 64 px gutter, and a query container for what it holds.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/container
On this page

Example#

Look of this example

Fernlight's paragraphs never run edge to edge.

Live render of examples/container/basic.tsx

Usage#

Use a container to hold content at one of the page widths with the standard gutter: 16 px on phones, 24 on tablets and 64 on desktops. It is also a query container, so what it holds can respond to its width.

  • width matches Section: prose (70 characters), content (72 rem), wide (90 rem) or full.
  • Inside a section you rarely need one: Section width already sets the measure.
  • Long reading goes in prose, so lines stay under about 70 characters (D-B10).

Anatomy#

Fernlight's paragraphs never run edge to edge.

The parts of examples/container/basic.tsx, numbered:
  1. ContainerCentred at its width, with the gutter inside..mk-container

Volume#

Layout only: identical at every volume.

  • Quiet

    Fernlight's paragraphs never run edge to edge.

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Fernlight's paragraphs never run edge to edge.

    The site default. Art on its own plates, one display moment per view.

  • Press

    Fernlight's paragraphs never run edge to edge.

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Fernlight's paragraphs never run edge to edge.

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Pick the width by what people do there: read (prose), browse (content), look (wide).

Do and don't#

Do

Fernlight's paragraphs stop at a comfortable measure, so the eye finds the next line.

A measure for reading.

Don't

Fernlight's paragraphs run edge to edge on a wide screen, so every line is a long trip back to the start of the next one.

Lines as long as the window.

Past about 70 characters, readers lose their place between lines. The prose width keeps body text readable on any screen.

Accessibility#

  • A container adds no semantics; it only sets width, gutter and containment.

Props#

PropTypeDefaultDescription
width"content" | "full" | "prose" | "wide"contentDefault `content`.
renderRenderPropnone
childrenReactNodenone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from ContainerProps in packages/overprint-react/src/reading/container/container.tsx.

Tokens#

System tokens (6)

Its own properties (2)

  • --mk-container-gutter
  • --mk-container-max

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry