Bricks elements

Tier 3 on Bricks — the custom Bricks Builder elements, and which framework pattern each one is.

Tier 3 ships the same patterns as custom Bricks Builder elements, so a WordPress site builds from the design system through the builder UI rather than by hand-writing markup.

Tier 3 has two platforms and these are one of them — theAstro components are the other, at the same tier rather than below it. Both generate HTML from the classes and elements of tiers 1 and 2; which you use is decided by your platform, and no project uses both.

Prefer the framework's classes over hand-tuning Bricks' own property controls.A class encodes the tokens, the spacing grammar and the interaction states, so it stays consistent and reacts to theme and dark mode; a value typed into a property control is a one-off that drifts from the system and doesn't. Reserve those for genuinely bespoke, one-element cases.

Bricks provides some of the system natively — its Color, Font, Spacing and Typography managers — so those layers are delivered as JSON to import rather than as CSS. SeeOutput formats for what thebricks format emits.

`vitops-carousel`

Pattern: carousel
Recommended call: <Carousel slides={…} label="…" /> — it emits <wc-carousel> itself, so do NOT add your own wrapper. .carousel is the shell and .carousel__track the scroller; add loop for the cloned infinite strip (autoplay implies it).
Also in: CSS, Web component, Astro

`vitops-centered`

Pattern: centered
Recommended call: .centered as a track grid. Children land in measure — give it a track child to lay out inside.
Also in: CSS

`vitops-color-scheme-toggle`

Pattern: color-scheme-toggle
Recommended call: <wc-color-scheme-toggle></wc-color-scheme-toggle>. Renamed from <color-scheme-toggle> in 4.0. Shadow DOM, so it is absent rather than broken without JS.
Also in: CSS, Web component

`vitops-copy-button`

Pattern: copy
Recommended call: <wc-copy> around the content and a [data-copy] button.
Also in: CSS, Web component

`vitops-dismissable`

Pattern: dismissable
Recommended call: <wc-dismissable> around any banner/notification containing a [data-dismiss] control.
Also in: CSS, Web component

`vitops-entries`

Pattern: entries
Recommended call: <wc-entries> around <h3> + <dl> pairs. The tier-2 exemplar: semantic pairs with no JS, a table with it.
Also in: CSS, Web component

`vitops-icon`

Pattern: icon
Recommended call: <Icon name="menu" />. Names are semantic and resolve per configured set; a name containing : passes through.
Also in: CSS, Astro

`vitops-image-compare`

Pattern: image-compare
Recommended call: <wc-image-compare> with two images. Both are visible without JS.
Also in: CSS, Web component

`vitops-multi-field`

Pattern: multi-field
Recommended call: <wc-multi-field> around a field template. One row submits fine with no JS.
Also in: CSS, Web component

`vitops-sitenav`

Pattern: sitenav
Recommended call: .sitenav with --bp-* and a drawer direction. <details> + Invoker Commands, no JS.
Also in: CSS

`vitops-split`

Pattern: split
Recommended call: .split plus a ratio class. Pure CSS; md-split-1-2 for the responsive form.
Also in: CSS

`vitops-split-link`

Pattern: split-link
Recommended call: .split-link — a link plus a disclosure toggle. No JS.
Also in: CSS

`vitops-split-panel`

Pattern: split-panel
Recommended call: <wc-split-panel> with two children. Unenhanced they simply stack.
Also in: CSS, Web component

Controls, defaults, seeded children and keywords for each element are in the generatedBricks elements reference.