Контейнер

Контейнер центрирует содержимое, ограничивает ширину, чтобы строки текста оставались читаемыми, и держит поле, чтобы на телефоне ничто не упиралось в край экрана. Обычно он идёт первым внутри body().

Простой контейнер

Всё внутри остаётся по центру и перестаёт расти на пределе ширины.

container(
  text({ variant: 'lead' }, 'Всё внутри остаётся по центру и перестаёт расти на пределе ширины.'),
)

Размеры

Пять ступеней — от одной читаемой колонки до полного отсутствия ограничения. sm это примерно 40rem, та самая ширина, которую любит текст.

sm — 40rem

md — 56rem

lg — 72rem (по умолчанию)

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem (по умолчанию)'),
  ),
)

Своя ширина

width принимает любую CSS-длину и перебивает size — для той единственной страницы, которой нужно то, чего в шкале нет.

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

Боковое поле

Боковое поле — это отступ, который держится между содержимым и краем окна. Оно принимает токен интервала, число единиц интервала или обычную длину.

Более широкое поле — для страницы, содержимое которой на планшете не должно доходить до края.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Более широкое поле — для страницы, содержимое которой на планшете не должно доходить до края.'),
)

Как другой элемент

as меняет тег, не трогая всё остальное, — удобно, когда контейнер заодно является <main> страницы или <section>.

Элемент main

Та же раскладка, правильный ориентир.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Элемент main'),
  text({ tone: 'muted' }, 'Та же раскладка, правильный ориентир.'),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Какое ограничение ширины применить.
`width`	`string`	—	Обычный max-width, перебивающий size.
`gutter`	`Space`	`'md'`	Внутренний отступ, удерживаемый от края окна.
`as`	`string`	`'div'`	Какой элемент рендерить, например main или section.