# I9kPageContainer
> Centered, width-capped page wrapper with a size-driven horizontal gutter and a minimum height, in the shared page column. Use it once per page as the outermost content wrapper; for a section of a page use I9kContainer.
```ts
import { I9kPageContainer } from '@9klabs/design';
```
## Examples
### Default
```vue
A centered page container in the shared page column, with responsive gutters.
Page content
```
### Sizes
```vue
Small gutter
Large gutter
```
## Watch out
- `size` only sets the horizontal gutter (padding-inline) — the column width is the shared `--container-width-md` regardless of size.
- Below 768px viewports the gutter always drops to the `sm` spacing, overriding whatever `size` was passed.
- The container does not space its children vertically; group related content yourself.
- It is a page wrapper: a flex column with a minimum height. For a section, or anything that must not set those, use I9kContainer, which shares the column.
## API
### Props
| Prop | Type | Default | Required |
| --- | --- | --- | --- |
| `as` | `string \| Component` | `'div'` | no |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no |
### Slots
- `default`
## Agent prompt
```text
Use I9kPageContainer from @9klabs/design as the outermost wrapper for a page's content.
import { I9kPageContainer } from '@9klabs/design';
Props:
- as?: string | Component (default 'div') — the rendered root tag or component.
- size?: 'sm' | 'md' | 'lg' (default 'md') — sets the inline gutter (padding-inline) only.
Emits: none.
Slots: default — the page content.
Behavior: renders a flex column whose content is the shared page column wide (--container-width-md, 75rem, the same measure I9kContainer, I9kNavigation and I9kFooter use), with the gutter outside that column, centered with `margin-inline: auto`, and a `min-height: calc(100vh - 250px)` so short pages still fill the viewport. Below a 768px viewport the width becomes 100% and the gutter is forced to the 'sm' spacing regardless of the `size` prop.
IMPORTANT: `size` only changes the horizontal gutter — it does not change the column width or add vertical spacing between children. Wrap groups of children yourself (e.g. in I9kCluster or a styled div) if they need gaps. Only 'md' keeps the content aligned with the header and footer on a viewport narrower than the column; 'sm' and 'lg' change the gutter and so the alignment there.
IMPORTANT: for one section of a page, or a wrapper that must not impose a minimum height or a flex column, use I9kContainer instead.
Usage:
WelcomePage content
```