Containers

Page-level width constraints. Three width strategies (constrained / breakpoint / narrow); pair with mobile_padding=false for the edge-to-edge-on-mobile variants.

Preview

Constrained, full-width on mobile

max-w-7xl · no px on mobile · sm:px-6 lg:px-8

Constrained, padded

max-w-7xl · px-4 sm:px-6 lg:px-8

Breakpoint, full-width on mobile

container · no px on mobile · sm:px-6 lg:px-8

Breakpoint, padded

container · px-4 sm:px-6 lg:px-8

Narrow (max-w-3xl inside max-w-7xl)

max-w-7xl · max-w-3xl inner · px-4 sm:px-6 lg:px-8

React preview

LiveView (HEEx)

alias DesignSystem.UI.Containers

<!-- Constrained (default): max-w-7xl with mobile padding -->
<Containers.container>
  <!-- page content -->
</Containers.container>

<!-- Full-width on mobile (pair with edge-to-edge cards) -->
<Containers.container mobile_padding={false}>
  <!-- content -->
</Containers.container>

<!-- Tailwind's responsive `container` width -->
<Containers.container variant="breakpoint">
  <!-- content -->
</Containers.container>

<!-- Narrow reading column (max-w-3xl nested in max-w-7xl) -->
<Containers.container variant="narrow">
  <!-- long-form content -->
</Containers.container>

React (JSX)

import { Container } from "../ui/index.mjs"

// Constrained (default)
<Container>{/* page content */}</Container>

// Full-width on mobile
<Container mobilePadding={false}>{/* content */}</Container>

// Tailwind's responsive `container`
<Container variant="breakpoint">{/* content */}</Container>

// Narrow reading column
<Container variant="narrow">{/* long-form content */}</Container>