Vitral 0.2

Northgate Homes

A real-estate agency’s site. Search by area, type, budget and bedrooms, see the results as pins on a drawn map, narrow them down with a price range, then open a home to browse its photos, estimate the mortgage and pick a slot in the agent’s calendar.

Real estateSearchBooking
Live demoSource on GitHub

Screens

  1. 2

    Listings

    Filters, sorting and a grid or list of homes

    Open live
    Northgate Homes: the Listings screen
  2. 3

    Property

    Gallery, facts, a mortgage estimate and booking a visit

    Open live
    Northgate Homes: the Property screen

What's inside

3 screens and 18 components, wired together with shared state and local navigation.

Features

  • A search panel whose filters are shared with the listings screen
  • An illustrative map with price pins linked to the result cards
  • Filters with a price range slider, type checkboxes and a bedroom switch
  • Grid and list layouts with sorting and pages
  • A property page with a gallery, a mortgage estimate and a bookable week in Schedule

Screens

Questions

About Northgate Homes, and about templates in general.

No — it is drawn with CSS so the template has no map dependency. The pins are positioned by percentages; swap the block for your map library and keep the pin buttons.