Container

A fixed-width, centered container: size maps to --oas-container-* width tokens, margin-inline: auto centers it (logical property, RTL-compliant automatically), and max-width: min(100%, token) prevents overflow on narrow screens.

Basic usage

Default lg centered

max-width: 992px

Example

Sizes

size has six tiers: xs（480）/ sm（576）/ md（768）/ lg（992）/ xl（1200）/ full（100%）. The container uses a hover background color to mark its actual width.

Six size tiers

xs · 480pxsm · 576pxmd · 768pxlg · 992pxxl · 1200pxfull · 100%

Example

Disable centering

With center="false" centering is disabled (margin-inline: 0) and the container hugs the start of the line (the left side in LTR).

center=false

Left-aligned, no longer centered

Example

Padding

padding accepts any token/value and applies to padding-inline (logical padding).

padding

16px padding on both sides of the content

Example

Fluid

The fluid boolean attribute removes max-width entirely — the container always spans 100% of its parent (pure fluid). It is orthogonal to size: when present, the size width limit is ignored. Suitable for content that must fill the width while keeping the narrow-screen protection of width: 100%.

fluid vs fixed width

fluid · spans 100%size="md" · 768px fixed (comparison)

Example

Breakout

Any slotted child with a breakout attribute breaks out of the fixed width to span the full viewport width (classic formula width: 100vw + margin-inline: calc(50% - 50vw)). Ideal for a "constrained content, full-width local banner" page structure.

breakout — full-width banner

First paragraph of constrained content

breakout banner · breaks 768px to span the viewport

Second paragraph of constrained content

Example

Viewport scrollbar note: 100vw includes the vertical scrollbar width, so a breakout element can overflow horizontally when the page shows a scrollbar. Suppress it with overflow-x: clip (or overflow-x: hidden) on a top-level page wrapper — not on the container itself (that would clip the breakout).

Empty container

An empty container causes no error and takes no placeholder.

Empty container

Example

API

oas-container

Attributes

Attribute	Description	Type	Default
center	Whether to center (center="false" disables)	string	true
fluid	Boolean; removes max-width entirely (pure fluid 100%). Orthogonal to size — when present, the size width limit is ignored	boolean	—
padding	Padding token/value (applies to padding-inline)	—	—
size	Fixed-width tier, mapped to --oas-container-* tokens	string	lg

Slots

Name	Description
default	Container content

CSS Variables

CSS Variable	Default
--oas-container-full	—
--oas-container-lg	—
--oas-container-max	var(--oas-container-lg, 992px)
--oas-container-md	—
--oas-container-padding	0
--oas-container-sm	—
--oas-container-xl	—
--oas-container-xs	—