Website pattern library

Choose a complete design, a proven page, or one focused component.

SBE Sites keeps design and structure in versioned code while owners edit the words, photos, and business details they use. Browse working examples below to see how a site can be assembled without handing the owner a fragile page builder.

Design library

Ten designs, each one a working site.

Every tile below is a live SBEv2 site, previewed in place rather than screenshotted — what you see is what the platform is serving right now. Each started from a third-party reference design and was rebuilt into the platform's own editable components, so the layout is locked while every word and photo stays editable by the site owner. Open any one to browse it full size.

General contractor

ID DES-0008

Halstead Construction Group

Industrial and photo-led, built around a project gallery and a quote request.

Rebuilt from BuildCraft, Colorlib (CC BY 3.0)

Dental practice

ID DES-0009

Brightside Dental

Clinical and calm, with treatment tiles and an appointment-led contact section.

Rebuilt from BrightSmile, Colorlib (CC BY 3.0)

Day spa

ID DES-0010

Serenite Day Spa

Soft and unhurried, serif headings over a wide treatment-room photo.

Rebuilt from Serenite, Colorlib (CC BY 3.0)

Barbershop

ID DES-0011

Ironside Barber Co.

Dark and editorial, with a flat price list and a full-bleed shop photo.

Rebuilt from Gentlemen Barber Shop, TemplateMo

Lawn and landscaping

ID DES-0012

Greenline Lawn & Landscape

Warm and local, service cards arranged around a seasonal schedule.

Rebuilt from LawnCare, Colorlib (CC BY 3.0)

Concrete and sitework

ID DES-0013

Girder Construction Co.

Structural and confident, heavy rules with a wide lead project.

Rebuilt from Girder, uiCookies

Handyman

ID DES-0014

Toolbelt Home Services

Friendly and flat-priced, centred hero over a workshop photo.

Rebuilt from Toolbelt, uiCookies

Plumbing

ID DES-0015

Fontanero Plumbing

Clean corporate blue, leading with a 24-hour emergency callout.

Rebuilt from Fontanero, uiCookies

Auto repair

ID DES-0016

Carepair Auto

Dark automotive, diagnostics-first with a workshop gallery.

Rebuilt from Carepair, Colorlib (CC BY 3.0)

Chiropractic clinic

ID DES-0017

Alignment Chiropractic

Quiet clinical, treatment rows with a defined course of care.

Rebuilt from Chiropractic, Colorlib (CC BY 3.0)

Page examples

Start with the job a visitor needs to finish.

A page combines several focused components into one complete visitor task. These church-first examples are working routes, not screenshots.

Page example

ID PAG-0001

Plan a visit

Answer the practical questions that can keep a first-time guest from walking in.

Best for: First-time visitors, families, and accessibility details

View example

Page example

ID PAG-0002

Contact

Give visitors a focused place to ask a question or request a conversation.

Best for: General questions and pastoral contact

View example

Page example

ID PAG-0003

Watch sermons

Feature the latest message and connect visitors to the church’s video channel.

Best for: Sermons, livestream archives, and message notes

View example

Page example

ID PAG-0004

Events

Put the next few gatherings first without forcing visitors through a dense calendar.

Best for: Upcoming gatherings and recurring ministries

View example

Page example

ID PAG-0005

Give

Explain giving clearly, then hand payment processing to the church’s trusted provider.

Best for: Online giving, mail-in gifts, and common questions

View example

Component examples

Reuse the building blocks without turning the site into a page builder.

Each prototype has a bounded content shape and a real renderer. Once a contract works across more than one page and design, it can graduate into the owner editor.

SBE component

ID CMP-0001SBE form handler