Mushilu-San UI Container
Centres page content and limits its width to a readable measure.
Selector: mui-container
import { Container } from '@mushilu-san/ui/layout';Loading example…
Overview
size and centres its content. padded adds side padding, which is on by default so content does not touch the screen edge on mobile.
When to use
The main content column of a page. Keeping a form or article at a readable width.
When not to use
Arranging items next to each other. Use a Stack or a Grid. Use Stack instead.
Guidelines
Do
Use one container for the main content of each page.
Don't
Do not nest containers. Each one adds padding and narrows the content.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — | <main> around it for the main landmark. |
Keep the content width readable. Long lines are harder to follow.
API
Container
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Controls the max-width breakpoint of the container. |
padded | boolean | true | Whether the container applies inline (horizontal) padding. Accepts attribute presence, e.g. <… padded>. |
CSS parts
::part(root)
Tokens
--mui-space-4--mui-space-6