A dedicated page for components that need more space or interaction.

Here is a single page showcasing all medium-complexity components in a clean stack. If you are looking for a really cool component, check out the complex component page.

Atoms are the smallest, most reusable elements in your system. They don’t stand on their own as full sections, but they form the foundation for everything else you’ll build. Buttons, headings, icons, images, labels, and simple dividers all fall into this category. These elements establish the visual language of the site—spacing, typography, color, and interaction—so that larger components stay consistent no matter where they’re used. This page gives you a quick look at each atom in its simplest form before you see how they’re combined in more complex components.

Some will be demoed inside of their organism.

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.

Welcome to Your Component System

This site demonstrates the building blocks used to create flexible, modern pages across your website. Each block is designed to be reusable, mobile-friendly, and adaptable to a wide range of content needs.

You’ll see how a page is assembled from the smallest pieces (atoms) all the way up to complete layouts. Everything shown here is built inside your CMS using the custom block system, so what you see is exactly what you can publish.