Layout Demonstration

The components on this page show how your pages are structured. Layout elements define spacing, alignment, and the overall flow of content. They form the foundation that every other block sits inside. By combining containers, grids, columns, slabs, and hero sections, you can assemble pages that remain flexible, consistent, and easy to maintain.

Quick sections are easy ways to build quick containers to build content.

There are two primary strategies for building out layouts: columns (think Bootstrap) and grids. Though these are similar, you can use them according to what you feel comfortable.

Slab (Section)

Slabs are the building blocks of full-page, full-width sections. They provide the background, spacing, and tonal contrast needed to break up content clearly. You can choose from light, dark, or neutral slabs depending on the mood or emphasis you want to create. Slabs help guide users through the page, making long content feel more organized and easier to digest. They serve as the structural “chapters” of your layout system.

You can use these as the primary containers for all of your content on a page (Quick sections start with these).

Container

A container sets the maximum width for your content. The default container keeps text readable and gives the page consistent margins across all devices. When you need your content to span the full width of the screen—such as image-heavy sections or full-bleed heroes—you can switch to a full-width container. Both options maintain consistent spacing and ensure your content feels intentional.

These fit best in slabs, but you can also use these to put rows in columns and such.

Column

Columns let you control how content sits next to each other. A single column gives you a simple, centered block of content. Multiple columns allow you to place related content side-by-side, such as text next to an image or two evenly weighted text areas. Columns automatically stack on smaller screens, making them fully responsive without extra adjustments.

Grid

Grids give you more structured control over multi-column layouts. You can choose from 2, 3, 4, or 6-column configurations depending on the level of detail you need. Grids are excellent for displaying content in repeated patterns, such as cards, icons, or feature highlights. Each grid automatically responds to different screen sizes, collapsing or reflowing to maintain readability.

Grid Column

Grid columns define how content spans across the grid structure. You can choose how many columns a specific block should occupy, giving you more granular control over layout. For example, a block might span two columns in a six-column grid on desktop, but take up the full width on mobile. This gives you the flexibility to create more dynamic layouts without custom styling.