Container
Centers content at a readable width.
JavaScript off: what the HTML and CSS do on their own.
Centers content at a readable width, with side padding that grows on larger screens.
Usage
<Container Size="ContainerSize.Lg">...</Container>Width
Use Size to cap the width, from Sm (40rem) for forms and short text to Xl (80rem, the default); narrower than that it fills its parent, with 16px of side padding (24px from 768px).
Preview
Notification settings
Choose which emails you get about invoices, payments and your team. Security alerts are always sent.
Code
<Box Bg="Color.FillSubtle" PaddingY="6" Radius="Radius.Lg" Grow>
<Container Size="ContainerSize.Sm">
<Column Gap="2">
<Heading Level="3">Notification settings</Heading>
<TextBlock Color="Color.Muted">
Choose which emails you get about invoices, payments and your team. Security alerts
are always sent.
</TextBlock>
</Column>
</Container>
</Box>Mode support
| Feature | Off | Static | Live |
|---|---|---|---|
| Everything | Yes | Yes | Yes |
Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).
Parameters
| Prop | Type | Default |
|---|---|---|
SizeThe widest it gets. | ContainerSize | ContainerSize.Xl |
AsThe element to render: div on a Box; components built on it set their own (List a ul, Section a section). | string | "div" |
ChildContentThe content. | RenderFragment? |
Plus 25 surface props, 16 item props and 4 common props.
Full API