Stepper Block — Basic
A numbered process flow block. type: stepper. Each step has: number (string), heading, body. Steps lay out horizontally on desktop and stack on mobile. No fixed step limit — 3–5 is typical. color_scheme: light shown here.
How We Work
Stepper Block — Dark Scheme
Same stepper on color_scheme: dark. Verify that step numbers, connector lines, headings and body text invert correctly against the dark background.
Getting Started with Greenview
Accordion Block — Standalone (Light)
type: accordion. Full-width standalone accordion block — equivalent to the inline Bard accordion set but as a page section. Each item has: question, answer. Use for FAQ pages or long-form Q&A. color_scheme: light shown here.
Frequently Asked Questions
Accordion Block — Mid Scheme
Same accordion block on color_scheme: mid. Verify that the expand/collapse toggle, dividers, and text all render correctly on the tinted background.
BIM & Coordination Questions
Feature Grid — Bento Block
type: bento. Magazine-style asymmetric grid. Each item has: heading, body, image (optional), size (small · medium · large). Large items span a wider cell; small items fill narrower cells. Used on the homepage for services. Supports an optional CTA button below the grid. color_scheme: dark shown here.
Spacer Block
type: spacer. Adds controlled vertical whitespace between page builder blocks. Options: size (xsmall · small · medium · large · xlarge · xxlarge). Below is a small spacer, then a large spacer. Use spacers instead of padding hacks when sections need extra breathing room.
Design System Complete
You have reached the end of the design system. If any block above is not rendering correctly under the Greenview theme, use this as your reference to diagnose and fix the CSS. Each block is labelled with its block type and variant in the Control Panel.