Step nav
Wizard progress indicator. The hero is single-page, so this is a reference pattern for any future multi-step flow (e.g. a quote builder).
.cfg-step
Step 2 of 4 — current
Component Kit
Every block needed to build the full Grothouse product configurator. The hero above already wires the components flagged Used in hero; the rest are reference patterns you can pull into other pages. Use the per-component toolbar to copy markup, peek at the rendered HTML, or inspect data-attribute / JS-hook contracts.
Material swatch
Wood-species picker with grain image + name + meta. Drop in a real grain photo via background-image (or via the inline CSS variable shown).
.cfg-material
Wood species picker
Edge profile
Line-art thumbnail picker. Profile artwork is bespoke inline SVG so production CAD drawings can be dropped in without an asset round-trip.
.cfg-edge
Edge profile picker
Option card
Selectable radio-style card. Variants: --inline, --stacked, --centered, --active, --disabled. Parent grid: --two, --three.
.cfg-card / .cfg-cards
Inline (title left, price right)
Stacked (subtitle / meta)
Three-up grid (used by Thickness in hero)
Disabled
Checkbox card
Multi-select add-on row with leading checkbox indicator. Paired with [data-cfg-multi="true"] on the parent group.
.cfg-check
Add-ons (multi-select)
Dimensions
W × L × T number inputs with a static "in" suffix. Inches only; Grothouse fabricates in inches.
.cfg-dim
Dimensions
Add 1" to each side for overhang. Final fit verified against your template.
Quantity stepper
Numeric stepper. Default is full-width with buttons at the ends; --inline hugs content for use inside cart rows or summaries.
.cfg-stepper / .cfg-stepper--inline
Block (full-width, default)
2
Inline (compact)
1
File upload
Drag/drop file zone with previews and per-file removal. The hero is single-page so this is reference only — drop it in for template-on-file products or a future template-builder flow.
.cfg-upload
Template upload
Sink, cooktop, and faucet cutouts can be added to the file or specified later.
Field states
Generic wrapper with hint, error, and success messaging. Pair with any input or composite component.
.cfg-field --invalid / --valid
Default
Used to label this configuration in your account.
Invalid
Please enter a valid email address.
Valid
We deliver to this area.
CTA button
Primary action. Variants: --block, --lg, --ghost, --soft. Two-child split via __label / __price.
.cfg-cta
Primary (split label + price)
Ghost
Soft
Info row + share
Subtle pill row for shipping/guarantee callouts and a primary-color text+icon link used as the share anchor in the hero.
.cfg-info / .cfg-share
Info pills
- Lifetime warranty
- Ships in 4 weeks
- White-glove install
Share link
Summary panel
Sticky line-item recap with edit affordance. Useful as a right-rail companion or fixed mobile bar — the hero collapses everything into a single panel so this is reference only today.
.cfg-summary
Sticky summary panel
Toast
Top-right notification stack. Production code calls Site.configurator.toast({type, title, msg}); these triggers are a prototype-only convenience.
.cfg-toast / Site.configurator.toast()
Trigger
Static example
Saved
Your configuration was saved to your account.
Modal
Centered dialog with backdrop blur. Open via [data-cfg-modal-open="<id>"]; dismissable by ESC, the close button, or a backdrop click.
.cfg-modal
Trigger
Drawer
Right-side slide-in for cart / details views. Reference pattern for a future mini-cart; the hero submits straight to add-to-cart.
.cfg-drawer
Trigger
Pro tip popover
Per-element explainer popover. Authored as WYSIWYG HTML; promotes to a bottom-sheet on small screens. Use anywhere, but most often inside .cfg-section__head.
.cfg-tip / .cfg-tip__panel
Inside a section header (production usage)
American Walnut
Standalone trigger (anywhere)
Lead time