65 lines
2.0 KiB
Markdown
65 lines
2.0 KiB
Markdown
|
# Container
|
||
|
|
|
||
|
|
The site has **one** content container. All sections, imported blocks, and future features must use it.
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { Container } from "@/components/container";
|
||
|
|
import { layout, containerClassName } from "@/lib/layout";
|
||
|
|
```
|
||
|
|
|
||
|
|
| Export | What it does |
|
||
|
|
| --- | --- |
|
||
|
|
| `<Container>` | Renders `div` with `layout.container` |
|
||
|
|
| `layout.container` | Class string for rare cases without the component |
|
||
|
|
| `containerClassName(extra?)` | Merges extras via `cn` |
|
||
|
|
|
||
|
|
## Spec
|
||
|
|
|
||
|
|
| Property | Value |
|
||
|
|
| --- | --- |
|
||
|
|
| Display | Block, full width of parent |
|
||
|
|
| Max width | `76.8rem` (1228.8px) — 20% wider than former `max-w-5xl` |
|
||
|
|
| Horizontal padding | `1.5rem` (`px-6`) at all breakpoints |
|
||
|
|
| Centering | `mx-auto` |
|
||
|
|
| Vertical padding | **None** — vertical rhythm belongs on the `<section>` |
|
||
|
|
|
||
|
|
## Full-bleed vs constrained
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
{/* Background spans viewport; content stays aligned */}
|
||
|
|
<section className={cn("section-shell bg-gradient-cta", layout.sectionY)}>
|
||
|
|
<Container className="section-content">
|
||
|
|
…
|
||
|
|
</Container>
|
||
|
|
</section>
|
||
|
|
```
|
||
|
|
|
||
|
|
Rules:
|
||
|
|
|
||
|
|
- Backgrounds, borders, and decorative washes may be full viewport width.
|
||
|
|
- Text, forms, card grids, and CTAs stay inside `<Container>`.
|
||
|
|
- Edge-to-edge imagery (hero photos, marquees) may break out **only** when the design intentionally requires it; any overlaid copy still uses `Container`.
|
||
|
|
|
||
|
|
## Replacing imported containers
|
||
|
|
|
||
|
|
When adapting Shadcn / Tailark / marketing blocks:
|
||
|
|
|
||
|
|
1. Delete their `container`, `mx-auto max-w-*`, and conflicting `px-*`.
|
||
|
|
2. Wrap content with `<Container>` (or apply `layout.container`).
|
||
|
|
3. Move vertical padding to `layout.sectionY` on the outer `<section>`.
|
||
|
|
4. Keep inner `max-w-*` only on prose columns.
|
||
|
|
|
||
|
|
## Do not
|
||
|
|
|
||
|
|
- Create `ContainerSm`, `ContainerWide`, or page-specific max-widths.
|
||
|
|
- Use `px-4` / `px-8` as section gutters (always `px-6` via the shared token).
|
||
|
|
- Apply `layout.container` twice (nested containers).
|
||
|
|
|
||
|
|
## Related
|
||
|
|
|
||
|
|
- [layout.md](./layout.md)
|
||
|
|
- [shadcn.md](./shadcn.md)
|
||
|
|
- Cursor rule: `.cursor/rules/layout-container.mdc`
|