Blueprint 01
Headers & Navigation
Three-zone versus two-zone headers, fixed heights, sticky trade-offs, mega menu structure, and the four mobile navigation patterns that survive a 320px viewport.
Read blueprint 01ComponentCraft — UI structure builder
Decide how every block of your page is actually built.
Bundlespoppi is a structural decision tool. You pick a component — header, hero, card, pricing table, form, footer — and it lays out the architecture options, the grid behaviour, the density, the spacing scale and what happens at each breakpoint. No theming, no opinions about your colour palette. Structure only.
- 11component types covered
- 7option axes per block
- 3breakpoint behaviours defined
Five structural blueprints
Each guide covers architecture patterns, hierarchy, density, spacing and the desktop, tablet and mobile behaviour for that family of components.
Blueprint 02
Heroes & CTA Sections
Split heroes, stacked heroes, full-bleed media heroes and the ordering of eyebrow, headline, lede, buttons and proof. Plus where a CTA band belongs in the page flow.
Read blueprint 02
Blueprint 03
Cards & Grid Systems
Five card architectures compared, auto-fit versus fixed-column grids, content density tiers, the 4/8/16/24/40/64 spacing scale and how to pick a border radius you can defend.
Read blueprint 03
Blueprint 04
Pricing, Features & Testimonials
Tier-count logic, comparison table versus card pricing, alternating feature rows, icon grids, and testimonial structures that stay readable when the quote runs long.
Read blueprint 04
Blueprint 05
Forms & Footers
Single-column form logic, label placement, inline validation states, error message anatomy, and footer column counts from four-column desktop down to stacked mobile.
Read blueprint 05
Service
Structure reviews
Send us a URL or a Figma frame and we return a written component map: hierarchy, grid type, density tier, spacing audit and breakpoint notes for every block on the page.
Ask about a reviewThe component canvas
Drag the blocks to reorder them, add the ones you need, and watch the page structure rewrite itself. Every control below changes the architecture, not the colours.
1. Add blocks
2. Set the options
3. Rearrange the structure
Drag a block, or use the arrow buttons if you are working from the keyboard.
The canvas is empty. Add a block from the list on the left.
Generated structure
Loading canvas…Why structure first, style second
Colour, type and imagery can be swapped in an afternoon. A page whose hierarchy is wrong needs a rebuild. These are the three checks we run before anything gets painted.
Check one
One primary action per region
If a visitor can see two buttons with equal visual weight in the same viewport, the region has no primary action. Demote one to a text link or move it into the next section. This applies to heroes, pricing cards and CTA bands equally.
Check two
The same gap means the same relationship
Pick one scale — 4, 8, 16, 24, 40, 64 — and use gap size to express grouping. Items 16px apart read as one unit; items 64px apart read as separate sections. Inconsistent gaps are the single most common reason a page feels amateur without anyone being able to say why.
Check three
Every block has a stated mobile behaviour
Reflow, stack, collapse into a disclosure, become a horizontal scroller, or drop below the fold. Choose one per block and write it down. A component with no stated mobile behaviour will get one by accident, usually a horizontal scrollbar.