Container
A responsive container that constrains content width and centers it on the page.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Container />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
5 tests across 1 file. Auto-generated from the test suite.
Content centered within max-w-md
max-w-sm
max-w-md
max-w-lg
max-w-xl
Pick a max-width to see it applied live.
max-w-md
API Reference
Container
| Prop | Type | Default | Description |
|---|---|---|---|
| MaxWidth | string? | "lg" | Tailwind max-w-* size token (e.g. sm, lg, 4xl) applied as max-w-{MaxWidth}. Set to null/empty to render without a max width. Default: "lg". |
| Center | bool | true | Horizontally centers the container within its parent via mx-auto. Default: true. |
| Padding | string? | "4" | Tailwind spacing token applied as horizontal padding (px-{Padding}). Set to null/empty for no horizontal padding. Default: "4". |
| ChildContent | RenderFragment? | — | The container's content. |
| Class | string? | — | Additional CSS classes merged onto the root div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Additional HTML attributes captured and forwarded to the root div. |