SlowlyThe builderStyling
Styling
The shared design panel every block uses, documented once.
Every block's look comes from its design panel, the same set of controls on every block. Because it is shared, it is documented here once. A block's own page covers only what is specific to that block.
Two things shape every value you set:
- Breakpoint. A value can differ per screen size, so a block stacks on mobile and sits in a row on desktop.
- State. A value can also change on hover, focus, and other states, including dark mode. Relative styling sets a block's look from a parent or sibling instead.
What the panel covers
| Section | Controls |
|---|---|
| Layout | display, flex and grid, position, alignment, z-index |
| Size | width, height, min and max, aspect ratio |
| Spacing | margin and padding |
| Typography | font, size, weight, line height, spacing, colour |
| Backgrounds | colour, gradient, image, video, overlay |
| Borders | width, style, colour, radius, shadows, outline |
| Effects | opacity, filters, blend mode, transitions, animations |
| Transforms | translate, rotate, scale, skew, perspective |
Set once, reuse everywhere
A value typed straight onto a block styles that block alone. To reuse a look, put it in a global class and apply the class wherever it belongs. Change the class once and every block carrying it updates.
For sizes that scale smoothly between breakpoints rather than jumping at each one, use fluid values.