Layout
Sections, columns, widths, backgrounds and edges. This is where a page takes shape before any block.
Two columns: left
A column of running text that fits the space it is given.
Two columns: right
A column of running text that fits the space it is given.
Three columns
A column of running text that fits the space it is given.
Second
A column of running text that fits the space it is given.
Third
A column of running text that fits the space it is given.
Four columns
A column of running text that fits the space it is given.
Second
A column of running text that fits the space it is given.
Third
A column of running text that fits the space it is given.
Fourth
A column of running text that fits the space it is given.
Sidebar on the left
A third of the width, for navigation or context.
Main content
Two thirds of the width, for what matters on the page.
Main content
Text on the left, the sidebar on the right.
Sidebar on the right
Good for contacts, opening hours or a summary.
Solid colour background
Any colour. Text turns white by itself when the background is dark.
Photo background
The photo gets a dark layer so white text always reads.
Frosted glass
A translucent, blurred panel over the photo, with text that still passes contrast.
Wave edge
The section starts with a wave instead of a straight line.
Torn edge
Torn paper, for brands with a hand-made feel.
Diagonal edge
A diagonal adds movement between two sections.