Breakdance Elements for Oxygen

Breakdance Elements for Oxygen is a separate extension plugin that adds Breakdance's
element library to Oxygen — sliders, tabs, accordions, pricing tables, testimonials,
counters, social embeds and dozens more. Once it's active they appear in the builder's
Add panel under a Breakdance category. (Forms come from a separate extension —
Breakdance Forms for Oxygen.)

Each element is documented on the Breakdance site, and that documentation applies here:
Breakdance element reference.
This page covers only what's different about running them inside Oxygen.

Tip: Paste the extension's license key at Oxygen → Settings → Extensions so it
receives updates. See Extensions Settings.

Some elements are hidden by default

Oxygen ships its own version of several Breakdance elements, so those Breakdance
versions start out hidden — otherwise the Add panel would list two of everything:

To use the Breakdance versions anyway, go to Oxygen → Settings → Elements, uncheck
them in the Hidden Elements list and save — a checked element is a hidden one. See
Elements Settings.

Style them from the Design tab

Breakdance elements are composite. What you drop on the page is a wrapper with the real
parts nested inside it — a Button renders as:

<div class="bde-button">
  <button class="button-atom bde-button__button">
    <span class="button-atom__text">Click Here</span>
  </button>
</div>

An Oxygen class you apply lands on the outer div. The part carrying the background,
padding and radius is .bde-button__button inside it, and the element styles that itself.
So a class that sets a background colour looks like it does nothing: the element's own
rule targets the inner node and keeps winning.

Style Breakdance elements from their Design tab instead. Every Breakdance element has
one (Oxygen's own elements don't), and its controls write to the right inner selectors.
When you do need a class-based override, target the inner part explicitly — a nested
selector in the Selectors panel, or custom CSS on the class — with a selector at least as
specific as the element's own.

Colours live in Oxygen variables

Activating this extension also switches on Breakdance's own global styling. A Global
Settings item appears in the builder's ••• menu, opening a Globals panel with Colors,
Buttons, Typography, Forms, Containers, Code and Other — the defaults every Breakdance
element inherits.

These are Breakdance's settings, stored separately from Oxygen's — the Brand, Text,
Headings, Links and Background colours here apply to Breakdance elements and are not
available to Oxygen classes.

Breakdance's old colour palette is retired in Oxygen. Under Colors, the Palette row is
a Manage Variables button that opens Oxygen's Variables panel, so one palette — your
Oxygen variables — covers the whole site. To use a variable in a Breakdance element, type
it into the colour field as a CSS expression, var(--brand-accent); the element picks it
up, even though the colour picker itself doesn't list variables.