Sizes
size="sm"(max-w-2xl / 672px)
Container size="sm"
size="md"(max-w-4xl / 896px)
Container size="md"
size="lg"(max-w-6xl / 1152px)
Container size="lg"
size="xl"(max-w-7xl / 1280px)
Container size="xl"
size="full"(max-w-full)
Container size="full"
Custom Element
Rendered as <section> with size="md"
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "full" | "lg" | Maximum width of the container |
| as | React.ElementType | "div" | Rendered HTML element |
| className | string | — | Additional classes on the root element |
Usage
import { Container } from "substrateui";
<Container>
<h1>Page content at max-w-6xl</h1>
</Container>
<Container size="sm">
<ArticleBody />
</Container>
<Container as="main" size="xl">
<Dashboard />
</Container>