Container
Centered max-width wrapper. Available sizes: sm, md, lg, xl, full.
Live Demo
Container sm — max 640 px
Container md — max 768 px
Container lg — max 1024 px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | componentPages.container_prop_size |
as | React.ElementType | 'div' | componentPages.container_prop_as |
children | React.ReactNode | — | componentPages.container_prop_children |
Usage
import { Container } from '@ghiberti85/ui'
// Default (lg — 1024px max)
<Container>
<p>Page content</p>
</Container>
// Small container
<Container size="sm">
<p>Narrow form or article</p>
</Container>
// Full width
<Container size="full">
<p>Full-bleed layout</p>
</Container>
// As a semantic element
<Container as="main" size="lg">
{children}
</Container>