Fundamental Elements are a small set of Breakdance elements designed for AI agents. When an agent builds ordinary page structure from HTML and CSS, Breakdance maps that structure to Fundamentals. If the page needs a specialized feature, such as a form or gallery, the agent can use the corresponding Breakdance element instead when explicitly instructed to do so
When building by hand, use the regular Breakdance elements. Fundamentals are intended for agent-built pages and are not a replacement for the rest of the element library.
Each Fundamental remains a separate Breakdance element. You can select it in the builder and change its content and settings. Its visual styles are managed through Breakdance selectors.
Content and Settings controls work like they do on other Breakdance elements. To change a Fundamental’s appearance, open Settings > Advanced > Classes and edit the applied selector. Fundamental OEmbed is the exception, with Design controls for its iframe aspect ratio, width, and height.
Fundamentals also support Breakdance’s shared element settings, including Conditions, Animations, Override Variables, and Interactions.
The rest of this article documents how AI agents should use Fundamental Elements when building in Breakdance.
Use Container for sections, groups, layout wrappers, and other structural HTML that does not act as a link. A Container can hold other elements. Set the appropriate HTML tag under Settings > Advanced > Tag.
Use Container Link when an entire group should act as one link, such as a linked card. Set its URL and whether it opens in a new tab. Do not place a Text Link, Container Link, or another link inside it.
Use Fundamental Text for an individual heading, paragraph, label, or another short text node. Its multiline content field supports simple inline HTML. Set the semantic HTML tag under Settings > Advanced > Tag.
Use Fundamental Rich Text when one element needs to contain several paragraphs, headings, lists, links, or inline formatting. Use Fundamental Text when the content is a single text node.
Use Fundamental Text Link for a text link that does not need to contain other elements. Set its text, URL, and whether it opens in a new tab.
Use Fundamental Image for an image from the WordPress Media Library or an image URL. Set accurate alt text. Its controls also support lazy loading and disabling the generated srcset and sizes attributes when required.
Use Fundamental SVG Icon for an icon that should remain an editable SVG Icon element in Breakdance.
Use Fundamental HTML5 Video for native HTML video. Configure the video file, looping, autoplay, mute, browser controls, and inline playback through its Content controls.
Use Fundamental OEmbed for content that WordPress can embed from a URL through oEmbed. It is the only Fundamental with element-specific Design controls: Force Iframe Aspect Ratio, Width, and Height.
Use Fundamental HTML Code when markup should remain one raw HTML block instead of becoming a tree of separate Breakdance elements. Do not use it for ordinary page structure that Fundamentals can represent directly. The builder label can be disabled or replaced with a custom label.
Use Fundamental JavaScript Code only when code must run on the page and regular elements or Breakdance Interactions cannot provide the required behavior. Execute runs the code in the builder preview. The builder label can be disabled or replaced with a custom label.
Except for Fundamental OEmbed, Fundamentals do not have element-specific Design controls. Apply classes to the element and manage their styles through the Selectors system.
Fundamentals support shared settings such as Conditions, Animations, Override Variables, and Interactions. Depending on the element, Advanced can also include custom CSS, classes, an ID, HTML attributes, and an HTML tag.
