Container

Stable

Centres page content with a maximum width and responsive gutters.

Container sets the readable width of a page region. Sizes come from the size tokens: sm 640, md 880, lg 1240 (the Binds site width) and xl 1440. The side gutters scale from 16 to 40px with the viewport.

Source Edit docs Report an issue

Overview

Content is centred at up to 640px wide.

tsx

import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Basic() {
  return (
    <Frame>
      <Container size="sm">
        <Inner label="Content is centred at up to 640px wide." />
      </Container>
    </Frame>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Content is centred at up to 640px wide.

Light

Content is centred at up to 640px wide.

Dark

Content is centred at up to 640px wide.

High contrast

Import

tsx

import { Container } from '@bindshq/stance-react';

Platforms

Container has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Container } from '@bindshq/stance-react';

Examples

Sizes

size="sm"

size="md"

size="lg"

tsx

import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 8, width: '100%' }}>
      {(['sm', 'md', 'lg'] as const).map((s) => (
        <Frame key={s}>
          <Container size={s}>
            <Inner label={`size="${s}"`} />
          </Container>
        </Frame>
      ))}
    </div>
  );
}

As a landmark

A labelled section landmark

tsx

import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Landmark() {
  return (
    <Frame>
      <Container as="section" aria-label="Pricing" size="md">
        <Inner label="A labelled section landmark" />
      </Container>
    </Frame>
  );
}

API reference

Prop	Type	Default	Description
`as`	`keyof JSX.IntrinsicElements`	`'div'`	Element to render, e.g. main or section.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Maximum width.
`flush`	`boolean`	`false`	Remove side gutters.

Accessibility

Render page regions as landmarks (`as="main"`, `as="section"` with a label) so they can be navigated.

Usage guidelines

Do

Use md for forms and long-form reading.
Use lg for marketing pages and dashboards.

Don’t

Nest containers; one per region.

Overview

Content is centred at up to 640px wide.

tsx

import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Basic() {
  return (
    <Frame>
      <Container size="sm">
        <Inner label="Content is centred at up to 640px wide." />
      </Container>
    </Frame>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Content is centred at up to 640px wide.

Light

Content is centred at up to 640px wide.

Dark

Content is centred at up to 640px wide.

High contrast

Examples

Sizes

size="sm"

size="md"

size="lg"

tsx

import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 8, width: '100%' }}>
      {(['sm', 'md', 'lg'] as const).map((s) => (
        <Frame key={s}>
          <Container size={s}>
            <Inner label={`size="${s}"`} />
          </Container>
        </Frame>
      ))}
    </div>
  );
}

As a landmark

A labelled section landmark

tsx

import type { ReactNode } from 'react';
import { Container, Text } from '@bindshq/stance-react';

const Frame = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      width: '100%',
      background: 'var(--st-color-bg-muted)',
      padding: '12px 0',
      borderRadius: 8,
    }}
  >
    {children}
  </div>
);

const Inner = ({ label }: { label: string }) => (
  <div
    style={{
      padding: 12,
      background: 'var(--st-color-bg-surface)',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 6,
    }}
  >
    <Text size="sm">{label}</Text>
  </div>
);

export function Landmark() {
  return (
    <Frame>
      <Container as="section" aria-label="Pricing" size="md">
        <Inner label="A labelled section landmark" />
      </Container>
    </Frame>
  );
}

Prop

Type

Default

Description

as

keyof JSX.IntrinsicElements

'div'

Element to render, e.g. main or section.

size

'sm' | 'md' | 'lg' | 'xl' | 'full'

'lg'

Maximum width.

flush

boolean

false

Remove side gutters.

Overview

Light, dark and high contrast

Import

Platforms

Examples

Sizes

As a landmark

API reference

Accessibility

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

Sizes

As a landmark

API reference

Accessibility

Usage guidelines

Do

Don’t

Related