Components Overview

A Component is a piece of your design — a card, a call-to-action, a pricing table — that
you build once and reuse anywhere: on pages, in templates, in headers and footers. Every
placement is an instance of the same component, so editing the component updates every
instance across your site at the same time.

Instances don't have to be identical. The component's author can expose chosen controls as
properties, and each instance can then set its own values for them — different text,
different images, even showing or hiding individual elements per instance — while
everything else stays in sync.

Where components fit

Three articles cover the rest of the feature:

• Creating & Managing Components — making a
  component, editing it, and the Oxygen → Components admin screen.
• Component Properties — exposing controls so each
  instance can have its own content, and showing or hiding elements per instance.
• Dynamic Data & Loops —
  binding a component to real content and repeating it once per post or term.

Adding a component to a page

Insert the Component element (in the Advanced category of the
Add panel), then pick a component from its
Block dropdown. The instance renders the component's elements directly — the Component
element adds no wrapper markup of its own, and all styling lives inside the component.

Components aren't limited to pages. They work the same way in
templates, headers, and footers, and a
loop element can repeat one for every post
in a query.

Nesting components

Components can contain other components — a "Pricing Table" component can be built from
"Pricing Card" components. Inline editing works on one component at a time; to edit a
nested component, open it in its own builder session.

When to reach for a component

Components are for repeated structure; classes are for repeated style. If only the
styling repeats, use a class. Reach for a component when the same arrangement of
elements — with its content and settings — appears in more than one place.

Two other things worth knowing before you commit to one:

• There's no way to convert an instance back into plain elements. If you need a
  one-off variation beyond what the properties allow, Duplicate the component on the
  admin screen and edit the copy.
• Design stays with the component. Per-instance differences are for content only —
  design controls can't be exposed as properties.