BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Container

Stable
Edit in Studio

Centers page content at a max width from the size scale with token side padding. Phones always get a 16px gutter.

Updated Oct 16, 2026

Rendered with the real component
Light
Centered content
Dark
Centered content

When to use

Use it for

  • The outer wrapper of a page or a page section.
  • sm for forms and reading (keeps lines under about 75 characters), lg for settings, xl for dashboards and tables.
  • render={<main />} on the page's main region.

Not for

  • Inside cards or dialogs: they already set their width and padding.
  • Full-bleed backgrounds: put the background on an outer element and the Container inside it.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Form
Do

Match the width to the content

Forms in an xl container stretch inputs to unreadable lengths. Pick sm.

Nested
Don't

Nested containers

A container inside a container doubles the padding and adds nothing.

Accessibility

  • A plain div by default; render as <main /> for the main region so the landmark exists.
  • Content reflows at 320px wide without horizontal scroll (WCAG 1.4.10).

Anatomy and tokens

Read from packages/react/src/components/Container/Container.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

7 tokens 0 semantic or component, change with theme and brand 7 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Container/Container.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.

Prop Type Default Description
size 'sm' | 'md' | 'lg' | 'xl' | 'full' 'xl' Max width: sm 640 (forms, reading), md 720, lg 960 (settings), xl 1200 (dashboards, tables), full. Default `xl`.
padding 'none' | 'sm' | 'md' | 'lg' 'md' Horizontal padding from the space scale: none, sm (16), md (24), lg (32). Default `md`.
render ReactElement none Render another element, for example `<main />`.

Playground

Change the props and see the real Container update. Controls are generated from the TypeScript props; nothing here changes the system. 

<Container size="sm" />
size
padding

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Container in Storybook) .

Embed Storybook stories here (2)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

AllStates

Changelog

  • New

    Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters). Gaps only accept space-scale keys.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes