Container

Centres content, caps its width at 1160px and adds the responsive side gutter. Put one inside each Section so page bands stay full-bleed while their content lines up.

StableSource

Content capped at 1160px, centred, with a side gutter

<Container>
<Box>Content capped at 1160px, centred, with a side gutter</Box>
</Container>

Import

tsx

import { Container } from "@merid/react";

Examples

Prose width

size="prose" caps content at 720px, the reading width for long-form text.

Reading width: 720px

<Container size="prose">
<Box>Reading width: 720px</Box>
</Container>

In a page band

tsx

<Section tone="tray">
  <Container>
    <Heading level={2}>Pricing</Heading>
  </Container>
</Section>

API reference

Renders a div unless as is given; forwards its ref and passes all HTML attributes through.

Prop	Type	Default	Description
`size`	`"default" \| "prose"`	`"default"`	Max content width: default 1160px, prose 720px.
`as`	`ElementType`	`"div"`	Element or component to render instead of a div, e.g. main.

Styling

Hook	Values
`.mrd-container`	Root element
`data-size`	`default` · `prose`

Component variable: --mrd-container-width, which resolves to --mrd-container (1160px) or --mrd-prose (720px).

css

.wide.mrd-container {
  --mrd-container-width: 1320px;
}

Accessibility

Container is layout only and adds no role. Use as="main" for the page's main landmark when it is the outermost wrapper.

Guidelines

Put backgrounds on the full-bleed Section and the width cap on the Container inside it.

Avoid

Nest containers, or give a container a background colour — the colour stops short of the viewport edges.

Section — the full-bleed band around a container.
Grid and Stack — layout inside a container.