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 examples
Stack + cluster + split
Stack
Three blocks with vertical rhythm.
Use it for prose and form sections.
ClusterWrapsInline items
Split grows left
Grid helpers
wb-grid-2
wb-grid-2
1
2
3
<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
wb-col-md-4
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
Manage people, roles, and invitations.
Breadcrumb is optional. Title is primary. Subtitle is supportive. Actions stay separate.