Skip to main content
Documentation/Elements Reference/Advanced/Component
Elements Reference

Component

The Component element places a component — a design you built
once and saved — anywhere on a page or template. It's the way a component gets onto a page
outside a loop.

Choosing the component

The Content tab has a single Block control: click it and pick a component from the
list. Until you do, the element renders "Choose a Component from the dropdown." on the
canvas.

If the component exposes properties, they appear in the panel directly under the Block
chooser, and the values you set apply to this instance only —
Component Properties covers exposing and setting them.

The Component element selected on the canvas, its properties panel showing the Block chooser with a component picked and that component's exposed properties beneath it

Editing the component from here

Double-click the element on the canvas to open the component it points at for editing.
Changes you save there apply to every instance of the component on the site, not just this
one.

Nesting

The Component element takes no children of its own — everything inside it comes from the
component. It can sit anywhere, including directly at the top level of the document.

On the front end

The element adds no markup of its own: the component's own elements are output directly
where the element sits, with no wrapper around them. Inside the builder the element does get
a .oxy-component wrapper, set to display: contents so it can't affect layout.