Layout

Container

Centers content in the 970px site column with 30px gutters (16px on small screens).

import { Container } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Sizes

prose: 72ch

default: 970px, the site column

wide: 1200px

container/sizes.tsx

import { Container, Stack, Text } from '@jsonresume/ui';
import * as styles from './sizes.css';

export default function ContainerSizes() {
  return (
    <Stack gap={2}>
      <Container size="prose" className={styles.band}>
        <Text>prose: 72ch</Text>
      </Container>
      <Container className={styles.band}>
        <Text>default: 970px, the site column</Text>
      </Container>
      <Container size="wide" className={styles.band}>
        <Text>wide: 1200px</Text>
      </Container>
    </Stack>
  );
}

container/sizes.css.ts

import { style } from '@vanilla-extract/css';
import { vars } from '@jsonresume/ui/tokens';

export const band = style({
  paddingBlock: vars.space[3],
  background: vars.color.surface.subtle,
});

Accessibility

Reflows to a single column at 320px without horizontal scrolling.

Props

Also accepts the attributes of the element Container renders.
Prop	Type	Default	Description
asChild	boolean	–	Render as the single child element instead of a <div>.
size	defaultfullwideprose	default	Style variant.