Commercial real estate website templates

A commercial property site is about space, terms and use. These templates include available offices, shops and industrial units with size, rent per sq ft and use, a featured building with floor areas, lease terms explained, and a section for landlords and investors. Every example is an original design that comes with its HTML code and a DESIGN.md of colour, type and spacing tokens, in light and dark. Free to use and adapt.

6 distinct designs

Commercial real estate template, Atlas layout

Atlassplit hero with a next-step card, card grids and a contact form

Commercial real estate template, Bento layout

Bentotile mosaic for the hero and services, floating pill navigation, rounded and friendly

Commercial real estate template, Folio layout

Foliomagazine layout: centred masthead, large type, numbered contents, ruled lists, no cards

Commercial real estate template, Ledger layout

Ledgerinformation first: fixed sidebar with hours and phone, tables and a timeline in the main column

Commercial real estate template, Listing layout

Listingsearch first: a search panel and area chips, listing cards beside a sticky map with numbered pins

Commercial real estate template, Showcase layout

Showcaseone home first: a full-width drawing with an intro card, a floor plan with room sizes, a listing mosaic and a dark close

Also for WordPress: Commercial real estate WordPress themes, 6 block themes you can install and edit.

Every screen, by style and device

DeviceAll Web Mobile

StyleAll Minimal Editorial Brutalist Playful Corporate Monochrome

Theme

12 examples

Draymark Property website, Ledger layout — web, minimal (Draymark Property)

Web · Ledger · minimal

Draymark Property website, Folio layout — web, editorial (Draymark Property)

Web · Folio · editorial

Draymark Property website, Showcase layout — web, brutalist (Draymark Property)

Web · Showcase · brutalist

Draymark Property website, Bento layout — web, playful (Draymark Property)

Web · Bento · playful

Draymark Property website, Atlas layout — web, corporate (Draymark Property)

Web · Atlas · corporate

Draymark Property website, Listing layout — web, monochrome (Draymark Property)

Web · Listing · monochrome

Draymark Property website, Ledger layout — mobile, minimal (Draymark Property)

Mobile · Ledger · minimal

Draymark Property website, Folio layout — mobile, editorial (Draymark Property)

Mobile · Folio · editorial

Draymark Property website, Showcase layout — mobile, brutalist (Draymark Property)

Mobile · Showcase · brutalist

Draymark Property website, Bento layout — mobile, playful (Draymark Property)

Mobile · Bento · playful

Draymark Property website, Atlas layout — mobile, corporate (Draymark Property)

Mobile · Atlas · corporate

Draymark Property website, Listing layout — mobile, monochrome (Draymark Property)

Mobile · Listing · monochrome

Commercial real estate website design tips

Show rent per sq ft, size and use on every listing.
Explain lease terms such as service charge and break clauses in plain words.
Separate occupier and landlord paths.
Add your real licence and regulatory details yourself.

Questions

What should a commercial real estate website include?

Available spaces with size, rent and use, a building or unit feature, services for occupiers and landlords, lease terms explained, the team and offices.

How should commercial listings show price?

As rent per sq ft per year for leases, or a sale price for freeholds, with service charge stated separately.

Browse by pattern

App screens

Dashboard
Data table
Analytics charts
Login
Sign up
Forgot password
Two-factor code
Welcome
Onboarding step
Permissions request
Home
Feed
List view
Detail view
Kanban board
Calendar
File manager
Search results
Editor toolbar
AI chat assistant
Chat list
Chat thread
Video call
Image viewer
Map view
Video player
Create post
Class schedule
Booking details
Booking confirmed
Product detail
Cart
Checkout
Order confirmation
Settings
Profile
Notifications center
Team members
Roles permissions
Audit log
API keys
Integrations
Billing plans
Invoice
Paywall upgrade
Cancel subscription
Empty state
404 error
Loading skeleton
Success confirmation
AI workspace
AI settings
Version history
Approval queue
Doctor directory
Telehealth visit
Clinic home
Music player
Playlist
Portfolio home
Case study
Security dashboard
Project tracker
Course dashboard
Multi-step form wizard
Bank onboarding
Product scan
Split view (master-detail)
Canvas editor
Floor plan
Voice call
Toast / snackbar with undo
Confirm dialog (destructive)
Side drawer
Command palette
Date range picker
Form validation errors
Sign-in error
Card declined at checkout
Find a pro (home services)
Book a home-service visit
Job tracker
Account email
Order email
Shift scheduler
Leave calendar
Time-off request
Multi-location operations dashboard
Inventory stock
Savings goal
Onboarding carousel

UI components

Tabs
Cards
Pagination
Popover
Tooltip
Dropdown menu
Accordion
Radio buttons
Breadcrumbs
Toggle switch
Stepper
Sidebar navigation
Loading spinner

Website sections

Website templates

Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.