Better — Steps / How-it-works
A horizontal three-column layout with numbered steps (1, 2, 3) in large green typography. Each step card has a light mint background, a bold heading, and descriptive body text explaining the action and benefit. Clean, linear progression design with clear hierarchy.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/better-three-step-process-to-get-pre-approved.
Palette
#FFFFFF#E8F8F5#1ABF7F#2D3436#A4A4A4
UX patterns
Progressive OnboardingWizard / Stepper
UI elements
Card
Context
Other sections on this page
- Hero — Mortgage payment calculator with live preview
- Feature — Monthly payment breakdown with editable cost components
- CTA / Sign-up — Homebuying power check with CTA
- FAQ — Expandable FAQ section about mortgage calculators
- FAQ — Mortgage basics accordion section
- Testimonial / Social Proof — 1400+ customers with Trustpilot ratings and review carousel
- CTA / Sign-up — Custom quote request with value proposition
- Testimonial / Social Proof — Expert opinions carousel with expert testimonials
- Comparison — Mortgage rates comparison table with term and APR breakdown
- Gallery / Showcase — Historical mortgage rate trends chart
- FAQ — Mortgage Calculator FAQs
- Feature — Six calculator and rates tools grid
- CTA / Sign-up — Homebuying power pre-qualification CTA
- Gallery / Showcase — All US states mortgage rates directory
- Footer — Compliance and legal footer with multi-paragraph disclosures