Stack
Three blocks with vertical rhythm. Use it for prose and form sections.
Layout
Layout is where page width, structural flow, navigation frame, and shell choice live. If you are asking about wb-container, wb-grid-*, wb-row, navbar, sidebar, or dashboard/content/auth shells, start here.
Base composition primitives
| Class | Use it for | Why it matters |
|---|---|---|
| wb-container* | Page width and horizontal padding | Keeps content measure consistent. |
| wb-section* | Major vertical bands | Defines outer page rhythm. |
| wb-stack* | Vertical flow | Handles repeated spacing without one-off margins. |
| wb-cluster* | Wrapped inline groups | Good for actions, chips, compact controls. |
| wb-split | Two-sided layouts | Lets the first child grow and the last child stay fixed. |
| wb-grid* | Simple repeated columns | Fast 2/3/4-column and auto-fill layout. |
Simple grid and flow
Stack + cluster + split
Cluster
Wraps inline items and keeps compact controls from breaking awkwardly.
Split
Grows left. Action stays fixed on the right.
<div class="wb-grid-2">...</div>
<div class="wb-grid-auto">...</div>
<div class="wb-split">
<div>grows</div>
<button class="wb-btn wb-btn-sm">fixed side</button>
</div>12-column row system
WebBlocks also ships a Bootstrap-like row/column grid in layout/grid.css.
<div class="wb-row">
<div class="wb-col-md-8">main</div>
<div class="wb-col-md-4">sidebar</div>
</div>
wb-col-md-8
Use this for the wider main reading or application column.
wb-col-md-4
Use this for the narrower sidebar rail or supporting content.
Shell selection
| Shell | Class | When to start here |
|---|---|---|
| Dashboard | wb-dashboard-shell | Admin products with persistent navigation and scrollable main area. |
| Auth | wb-auth-shell | Login, register, and quiet entry flows. |
| Settings | wb-settings-shell | Preference-heavy pages with local nav and sectioned forms. |
| Content | wb-content-shell | Docs, articles, legal pages, and text-first content. |
Shell rule
Choose the page shell before refining primitives. A dashboard should not be assembled from random cards before the frame is decided.
Header hierarchy
Members
Breadcrumb is optional. Title is primary. Subtitle is supportive. Actions stay separate.
Manage people, roles, and invitations.