Container

A max-width wrapper that centres content on the page with responsive side padding. Provides consistent content width across the application.

Preview

Narrow (640px) — prose, articles

max-width: 640px

Standard (960px) — forms, settings

max-width: 960px

Wide (1280px) — dashboards, tables

max-width: 1280px

Full-width — edge-to-edge content

width: 100%

Variants

Variant	Max width	Use case
narrow	640 px	Prose, articles, auth forms
standard	960 px	Forms, settings pages
wide	1280 px	Dashboards, data tables
full	100%	Edge-to-edge layouts

Responsive padding

Breakpoint	Side padding
≥ 1024px	32 px
≥ 768px	24 px
< 768px	16 px

Props

Prop	Type	Default	Description
size	'narrow' | 'standard' | 'wide' | 'full'	'standard'	Max width variant
as	string	'div'	HTML element to render
className	string	--	Additional CSS classes
children	React.ReactNode	--	Content

Code example

React

import { Container } from '@thepace/lexicon/components';

<Container size="narrow">
  <h1>Article Title</h1>
  <p>Prose content with optimal reading width.</p>
</Container>

<Container size="wide">
  <DataTable data={rows} />
</Container>

CSS utility

.my-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

CSS class reference

Class	Purpose
.lex-container	Base centred container
.lex-container--narrow	640 px max width
.lex-container--standard	960 px max width
.lex-container--wide	1280 px max width
.lex-container--full	Full width

Guidelines

Do

• Use the narrow container for long-form text content.
• Use the wide container for data-heavy views.
• Apply responsive padding that matches the spacing scale.

Don't

• Don't nest containers — only the outermost page wrapper should be a container.
• Don't hardcode pixel widths — use the container variants.