Layout blocks
Tessolo's six layout blocks — Section, Box, Stack, Grid, Spacer and Divider — plus sticky boxes, and when to use each one instead of spacing.
Six blocks that hold everything else. Most layout problems are solved by using the right one of these rather than by nudging spacing.
Section
A horizontal band of the page. Background, spacing and full-width behaviour live here, and everything else goes inside one.
Backgrounds can be a colour, a gradient, an image, a video, or a generated pattern. Add an overlay to darken an image so text stays readable, and there's an invert option that flips text to light in one step.
The eleven patterns — dots, grid, honeycomb, diagonals, retro grid, ripple, meteors, flickering squares, floating particles, light rays, light tunnel — are picked from a gallery of live tiles rather than a list of names. Four are static decoration; the rest move, and they look best on a dark background.
Sections can also have a shaped divider at the bottom — a curve or angle into the next section.
Use a section for: every band of your page.
Box
A box around its contents: background, border, corner radius, shadow. This is what a card is.
Also has hover effects — lift, scale, glow, border — and a glass option for a frosted panel over a background.
Decoration adds a moving edge treatment: a beam travelling around the border, a sheen, a neon glow, a glow that follows the cursor, or a glare on hover. Best on a dark background with rounded corners, and — like everything else here — one per page.
Use a box for: cards, callouts, anything that needs an edge or a background of its own.
Stack
Lines up a few elements in a row or a column, with spacing and alignment.
The workhorse for small arrangements: an icon beside text, two buttons side by side, a label above a value. When two things should move together, put them in a stack.
Row or column? Column is the default and right for most. Use row for things that belong side by side, and check the phone view — a row of three buttons often needs to become a column there.
Grid
Equal-width columns, side by side. Fewer columns on phones automatically — four or six halve on tablets and drop to two on phones; three become one.
Use a grid for: anything repeating. Feature cards, products, team members, logos.
With exactly two columns you also get a draggable divider for the ratio — 1:1, 1:2, 2:1 — so "wide text, narrow sidebar" takes one drag.
Grid or stack? Grid when the items are equals in a repeating pattern. Stack when they're different things that happen to sit near each other.
Spacer and Divider
Spacer is a blank gap. Divider is a line.
Reach for spacers sparingly. Usually the space you want belongs to the section's padding or a stack's gap, and spacing set that way stays right when the layout reflows on a phone. A spacer is a fixed gap that doesn't know what's around it.
A divider between two sections often reads better than more space.
Sticky boxes
A box can be made sticky, so it stays put while the page scrolls past — a table of contents beside an article, a summary beside a form.
Nice on desktop, and worth checking on a phone, where a sticky element can eat most of a small screen.