Skip to main content
Get Oxygen
Documentation/Elements Reference/Basic/Container
Elements Reference

Container

The Container is Oxygen's building block for page structure. It's a box that holds other
elements — sections, columns, cards, and wrappers are all Containers with different
styles. On the front end it renders as exactly one HTML element — a div by default,
with no extra wrapper markup.

A Container has no content settings of its own — it holds elements. A new one is
completely unstyled too: no preset width, height, padding, or background, so an empty
Container collapses to zero height and is invisible until you give it children or a size.

HTML tag

By default a Container is a div. Click the tag in the top-right corner of the
properties panel to change it — a Container offers section, footer, header, nav,
aside, figure, article, main, details, summary, ul, li, and ol, and you
can type any other valid tag instead of picking from the list. The canvas re-renders
with the new tag immediately.

The ul, li, and ol options mean you can build real HTML lists out of Containers:
an outer Container set to ul with children set to li.

Nesting

Containers can sit directly at the top level of the document, and they accept any
element as a child — including other Containers. Nesting Containers inside Containers is
the normal way to build up a page: an outer full-width Container for the section, inner
Containers for columns and groups.

The builder showing a page section built from nested Containers: the Structure panel with the nesting expanded and the outer Container selected on the canvas

On the front end

A Container renders as a single element: your chosen tag, carrying a generated
per-element class, the oxy-container element class, and any classes you added. Nothing
else is wrapped around it or injected inside it, and an unstyled Container adds no CSS of
its own.