Patterns

Ways of arranging a page, where the atlas uses them, where real pages show them, and what tends to go with what. All found by rules, never by hand.

Layout styles

• One column: Everything in a single column, read from top to bottom.
• Split in two: Two columns of about equal width: words on one side, a picture or form on the other.
• Off-centre split: Two columns of clearly unequal width.
• Alternating rows: Picture and words swap sides from row to row.
• Card grid: Three or more like items side by side, row after row.
• Bento: A grid of tiles of different sizes, one or two large and the rest small.
• Full bleed: A picture runs from edge to edge of the screen.
• Centred axis: Headings, text and actions on one centre line.
• Sidebar: A narrow column of navigation or filters beside the content.
• Swipe row: A row of items that runs on past the edge, to swipe or scroll sideways.
• Words over a picture: The heading and the action sit on top of a picture.
• Staggered columns: Columns of items of different heights, without rows lining up.
• Long scroll: A page of many screens, read as a sequence.
• Dense: Much on every screen: small items, little space between.
• Airy: Few things per screen, with a lot of space around them.