Layout, breakpoints and styles
Lay out a page with Box blocks, style a block in the Style tab, and adjust it for each breakpoint and state.
Updated November 10, 2026
Control how your blocks are arranged and how they look on each screen size and in each state, such as hover.
Build a layout with Box blocks
A Box is the layout block that holds other blocks. Add one from Insert, then Elements. The shortcuts differ only in their starting settings:
Section: a full-width block for a part of the page.
Container: centered content, up to 1200px wide.
V Stack and H Stack: flex layouts that stack blocks vertically or horizontally.
Grid: two equal columns that become one on mobile.
Select a Box and open the Style tab to change the layout. Under Layout, you set Display, Direction, Align, Distribute, Wrap, Gap, Grid columns, Padding and Margin. Use Layers in the left rail to reorder and nest blocks.
Style a block
Select the block on the canvas.
Open Style in the right panel.
Change the sections you need. Most blocks offer Layout, Size, Position, Background, Border, Styles (shadow, opacity, filters) and, for text, Typography.
To use the same styles on many blocks, use a class. See Classes, variables and schemes.
Adjust for tablet and mobile
Switch the breakpoint in the top bar. Style changes apply to the breakpoint you have selected.
Desktop: 1025px and wider. This is the base.
Tablet: 769px to 1024px.
Mobile: 768px and narrower.
Settings cascade down. Tablet inherits from Desktop, and Mobile inherits from Tablet and Desktop, unless you change a value at that breakpoint.
You can also change the canvas width for the breakpoint you are viewing, to test a specific size.
Style a state
The state switcher above the Style controls lets you style a block for Normal, Hover, Pressed and Focus. Pick a state, then change any control. Those values apply only in that state.
Some blocks have more states:
Links, buttons and selector options: Current, for the active item.
Buttons: Disabled.
Inputs and text areas: Invalid, Placeholder and Disabled.
Select fields: Invalid and Disabled.
Checkboxes and radio buttons: Checked and Disabled.
Animation lives in the Interactions tab. See Interactions.
Smooth scrolling
Open Site Settings, then Design, then Smooth scrolling. Turn it on, set the smoothness, choose whether in-page links scroll smoothly, and set their duration (0.1 to 4 seconds) and offset. It applies to published sites only.
An icon's size can come from a site variable, so one edit resizes every icon that uses it.
Related
Questions about building on PraismaHub? We're happy to help.
Contact us
