Home / Layouts
Chapter 03 · 14 entries

Layouts.

How you organize information on the page. A great layout guides the reader's eye from the most important element to the least important, without them noticing.

3.1
F-Pattern
Top-band + left-edge bias. Designed around how eyes actually scan text.
View demo
3.2
Hero + Feature Grid
The default SaaS landing layout. Hero, logos, 3-col features, pricing, CTA.
View demo
3.3
Asymmetric Split
60/40 splits instead of 50/50. Visual tension over corporate symmetry.
View demo
3.4
Masonry
Pinterest-style mosaic. CSS columns or Masonry.js — varied heights, no gaps.
View demo
3.5
Full-Page Scroll
100vh sections that snap. Cinematic storytelling.
View demo
3.6
Sidebar + Content
The universal app layout. Fixed left nav, scrolling work area.
View demo
3.7
Magazine Multi-Column
Tri-track grid with vertical rail, 2-col body, sticky ToC. Long-form journalism.
View demo
3.8
Diagonal Sections
Angled section dividers via clip-path. Visual rhythm without flat steps.
View demo
3.9
Vertical Timeline
Central spine, alternating events, dots that light up, progress fill.
View demo
3.10
Z-Pattern Layout
Alternating image-text rows traced through a zigzag eye path. Marketing workhorse.
View demo
3.11
Card Stack / Swipe
Tinder-style draggable deck for onboarding flows.
View demo
3.12
Magazine Cover
Italic masthead, cover lines, oversized display word. Print-cover hero.
View demo
3.13
Floating Overlap
Tilted photos, quotes, badges, giant numerals breaking the grid like a pinboard.
View demo
3.14
Split-Screen Hero
50/50 dual story panels. Hover one — it expands, the other dims.
View demo