Layout
Container
Horizontally centered max-width wrapper for page content with five width presets and optional inline padding.
Import
import { Container } from "@zephora/react";Examples
Sizes
sm = 640px, md = 768px, lg = 1024px, xl = 1280px, full = no max width.
sm · 640px
md · 768px
lg · 1024px
<Container size="sm">sm · 640px</Container> <Container size="md">md · 768px</Container> <Container size="lg">lg · 1024px</Container>
Padded section
`padded` adds inline padding; `as` changes the rendered element.
Page content stays readable on wide screens.
<Container size="md" padded as="section"> Page content stays readable on wide screens. </Container>
API
Container props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xl" | "full" | "lg" | Max width: sm=640px, md=768px, lg=1024px, xl=1280px, full=none. |
padded | boolean | false | Adds inline (horizontal) padding. |
as | keyof JSX.IntrinsicElements | "div" | Root element tag. |
unstyled | boolean | false | Headless mode — skips Zephora styling. |