Sometimes clicking on an element selects a parent or child instead of the one you want. In that case, use the sticky bar's
selector path to select the exact element. The path shows the current element and its parent elements, sibling elements, and
children. Hover over the path to see it selected on the page.
## Property groups
Once you've selected an element, the panel fills with collapsible property groups. Each group corresponds to a category of change.
### Content
If the selected element is a link (``), you'll get additional controls for editing the URL and link behavior. It will
let you set the `href`, and the option to open in a new tab (`target="_blank"`). If the link opens in a new tab, it will add `rel="noopener noreferrer"` attribute for security.
### Classes
The **Classes** field shows the element's current classes and allows you to add or remove classes. This is a quick way to apply existing styles from your CSS without needing to copy individual properties.
### Typography
Controls for text styling:
* **Font size** — with a unit selector (`px`, `em`, `rem`, `%`)
* **Font weight** — preset weights and custom numeric input
* **Color** — color picker plus hex input
* **Alignment** — left / center / right / justify (segmented control)
* **Line height** — unitless, `px`, `em`, `rem`, or `%`. Empty unit (`-`) means unitless, which is the CSS recommendation for line-height.
* **Letter spacing** — `px`, `em`
* **Text decoration** — none / underline / strikethrough / overline
Alignment and text decoration share a single row to keep the panel compact.
### Background & Border
For containers, cards, and any visually styled element:
* **Background color** — color picker with a clear option
* **Border** — width, style (solid / dashed / dotted / none), and color. The color swatch is positioned so the native color picker doesn't render off-screen for elements near the right edge of the viewport.
* **Box shadow** — None / Small / Medium / Large presets. The presets follow common design-system scales; for custom shadows, use Global CSS.
* **Background image** — paste a URL or use one of the [image flows](/app/visual/images). Hidden on `
The background image area allows you to set a background image on any element. This is similar to the `
The Layout group includes controls for choosing the display mode and adjusting spacing with padding and margin editors.
* **Display type** — choose between `block`, `inline-block`, `inline`, `flex`, `grid`, and `none`. Setting to `none` is a quick way to hide an element without removing it from the DOM.
* **spacing** — click and drag horizontally over a value to scrub it up or down (similar to Figma) for padding and margin.
* **Width & Height** — Select the width, max-width, height and max-height for your element. With unit selectors. Setting to `auto` removes the mutation.
Manual mode writes per-side longhands (`padding-top`, `margin-right`, etc.) and clears any shorthand `padding`/`margin` declaration, so the CSS cascade behaves predictably.
### Visibility
* **Hide this element** — a quick toggle that sets `display: none`.
* **Opacity** — slider from 0% to 100% plus a number input. Setting to 100% removes the mutation (no point keeping `opacity: 1` on the element).
## Global CSS and Custom JavaScript
For changes that don't fit cleanly into a single element's property groups, use the top-level **CSS** and **JS** tabs:
### Global CSS
Inject a CSS block that runs alongside the variation. Useful for:
* Page-wide background color or font changes
* Hover states that the structured controls can't express
* Animations
* `@media` queries for responsive tweaks (the only way to scope changes per breakpoint today)
The CSS is inserted into a `