A width for each kind of content
Container takes the available width of its parent up to the chosen limit. It does not scale the typography or stretch the columns: it controls the space of the composition.
A space for your interface
The container uses size=xl and gutter=md.
The preview is limited by this documentation column. In your application,
4k
allows an outer width of up to
240rem: 3840 CSS pixels with a 16px root font.
<UIContainer as="section" size="4k" gutter="md" ariaLabel="Projects">
<h2>Team projects</h2>
<p>Centered content, with responsive side spacing.</p>
</UIContainer>Maximum widths
| Name | Type / default | Description |
|---|---|---|
sm
|
40rem
| 640px. Forms and compact content. |
md
|
48rem
| 768px. Reading and settings. |
lg
|
64rem
| 1024px. Application content. |
xl
|
80rem
| 1280px. Default value. |
2xl
|
96rem
| 1536px. Wide panels. |
3xl
|
120rem
| 1920px. Large desktop views. |
4k
|
240rem
| 3840px. Work surfaces in 4K. |
full
|
none
| No limit: takes the available width of the parent. |
The pixel equivalents use a 16px root. The behavior depends on the CSS viewport, not on the physical resolution of the monitor. On screens wider than the maximum, the content stays centered.
Adaptive side spacing
gutter
adds logical padding on both sides, included in the outer width. The
md
value grows between 16 and 64px;
sm, between 12 and 24px;
lg, between 24 and 96px. Use
none
when the parent already provides that space.
<UIContainer size="4k">
<header>Workspace header</header>
<UIContainer size="lg" gutter="none">
<h1>Reading content</h1>
<p>A narrower width inside a wide surface.</p>
</UIContainer>
</UIContainer>API
| Name | Type / default | Description |
|---|---|---|
size
|
UIContainerSize
xl
| Maximum width. sm, md, lg, xl, 2xl, 3xl, 4k or full. |
gutter
|
none | sm | md | lg
md
| Fluid side padding with RTL direction support. |
as
|
UIContainerTag
div
| div, section, main, article, header, footer, nav or aside. |
id / ariaLabel / class
|
string
| Identity, accessible name and additional classes. |
It requires the
default
snippet. It adds no roles, headings or interactive behavior. Choose
as
according to the semantics of the content; do not nest another
main
inside the main one.
Customization
Use a class to override
--ui-container-max-width
or
--ui-container-gutter. The container does not hide overflowing content: tables and code blocks must manage their own scroll.
.workspace {
--ui-container-max-width: 110rem;
--ui-container-gutter: clamp(1rem, 3vw, 5rem);
}