Container

States

Container is not interactive; it is a layout rule only.

State	Support	Visual change
Default	Yes	md width, centred
Hover, pressed, focus, disabled, selected	No	None; Container is not interactive
Narrow viewport	Yes	Width fills the parent; padding is 16 px
1024 px and wider	Yes	Padding is 24 px

Measurements

Property	Value	Token
Maximum width, sm	720 px	container-max-width-sm
Maximum width, md	1104 px	container-max-width-md
Maximum width, lg	1440 px	container-max-width-lg
Maximum width, full	No limit	-
Inline padding	16 px	container-padding-inline-base
Inline padding, 1024 px and wider	24 px	container-padding-inline-md
Alignment	Centred horizontally (mx-auto)	-

Tokens

Values show for the selected brand; change the brand from the top bar.

Token	Light mode	Dark mode
--bigbang-container-max-width-sm	720px720px720px	720px720px720px
--bigbang-container-max-width-md	1104px1104px1104px	1104px1104px1104px
--bigbang-container-max-width-lg	1440px1440px1440px	1440px1440px1440px
--bigbang-container-padding-inline-base	16px16px16px	16px16px16px
--bigbang-container-padding-inline-md	24px24px24px	24px24px24px

Motion and interaction

Interaction	Motion	Reduced motion
Enter, exit, state change	None: Container does not move; it only sets layout and typography	Nothing to reduce

See the Motion page for motion details.