| description | Learn the Inspector controls shared by built-in components |
|---|
Common Controls are reusable Inspector groups that behave consistently across built-in components. Learning them once makes it easier to size, position, style, animate, and link components throughout a project.
The available groups depend on the selected component. Some components use a specialised variant with different defaults—for example, Image starts at 100% width, while a general component starts at Auto.
{% hint style="info" %} Many values are responsive. When a control supports breakpoints, set the Base value first and add overrides only where the design needs to change. {% endhint %}
| Link | link.md |
| Layout | layout.md |
| Sizing | sizing.md |
| Spacing | spacing.md |
| Typography & Text Styles | typography-and-text-styles.md |
| Backgrounds | backgrounds.md |
| Transitions | transitions.md |
| Effects | effects.md |
| Filters | filters.md |
| Transforms | transforms.md |
| Borders | borders.md |
| Advanced | advanced.md |
- Theme values use colours, spacing, typography, shadows, and borders defined in Theme Studio.
- Custom values accept valid CSS values where the control provides a manual mode.
- Responsive controls can be overridden at different breakpoints.
- State controls let you edit Static, Start, End, Normal, Hover, or other states without changing the state visitors initially see.
- Conditional controls appear only after the related feature is enabled or a compatible Type or Style is selected.
Individual component pages document any specialised defaults or behaviour that differs from these shared guides.