Container

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Container centres the content horizontally and limits it to the md width (1104 px). Inline padding comes from a token.

Sample text

LightDark

Copy code

import { Container } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="w-full bg-surface-sunken py-lg">
      <Container className="bg-surface-raised py-lg">
        <p className="type-body-md text-fg-default m-0">Sample text</p>
      </Container>
    </div>
  );
}

Widths

sm gives 720 px, md 1104 px and lg 1440 px; full sets no limit. In the example the parent is narrower than these values, so the wide sizes fill the parent.

sm: 720 px

md: 1104 px

lg: 1440 px

full: no limit

LightDark

Copy code

import { Container } from '@bigbang/ui';

const sizes = [
  ['sm', 'sm: 720 px'],
  ['md', 'md: 1104 px'],
  ['lg', 'lg: 1440 px'],
  ['full', 'full: no limit'],
] as const;

export default function Sizes() {
  return (
    <div className="flex w-full flex-col gap-md bg-surface-sunken py-lg">
      {sizes.map(([size, label]) => (
        <Container key={size} size={size} className="bg-surface-raised py-sm">
          <p className="type-label-md text-fg-default m-0">{label}</p>
        </Container>
      ))}
    </div>
  );
}

Main content landmark

render={<main />} draws Container as a <main> element. A page has one <main>.

The main content goes here.

LightDark

Copy code

import { Container } from '@bigbang/ui';

export default function Landmark() {
  return (
    <div className="w-full bg-surface-sunken py-lg">
      <Container size="sm" render={<main />} className="bg-surface-raised py-lg">
        <p className="type-body-md text-fg-default m-0">The main content goes here.</p>
      </Container>
    </div>
  );
}