The Advanced section binds custom CSS variables to the element and sets accessibility (semantic tag, id, ARIA label, role) plus data-f0-embed slots for raw HTML.
Where: Right sidebar → Advanced — Select an element and open Advanced
Key ideas
- Variables: Bind any property to a CSS custom property (--*).
- Accessibility: Semantic tag, id, aria-label, role.
- Embed slots: data-f0-embed-before / html / after inject raw HTML at export/preview.
Steps
- Open the Advanced section.
- Bind variables or set accessibility attributes.
- Use embed slots to inject custom HTML (e.g. a third-party widget).
Variables and semantics
- Bind compatible values to CSS custom properties for design-system control.
- Choose the correct semantic tag before adding ARIA.
- Set a stable id only when links/scripts need it.
- Use aria-label/role only when native semantics do not already communicate the element.
Raw embed slots
data-f0-embed-before, data-f0-embed-html, and data-f0-embed-after inject raw HTML around/inside the element during preview/export. Treat this as code with the same security, privacy, and performance review as any third-party script/widget.
Limitations and important notes
- Raw HTML can break layout, accessibility, security, or export behavior; use only trusted markup and test the published result.