Turn 2 · Campus map in each template · desktop 1440
The interactive campus map, three ways
Same map data (14 locations, 5 categories, a 7-stop curated tour, Smart Path builder) rendered in each template's own grammar. The map is a page (/campus) plus an optional home-page teaser section. 2a is the Suffolk Campus Discovery pattern; 2b and 2c follow the Editorial and Guide layouts from 1b and 1c.
2a Cinema · Campus Discovery Full-viewport map · directory drawer left · tour dock bottom · HUB docked right
SUFFOLK UNIVERSITY
Video LibraryCampus Discovery
⌕ Search Campus
StudentHUB
Campus Directory
14 Locations
Labels ON
⌕ Filter buildings, dorms, gyms…
All
Labs
Living
Athletics
Suffolk Downtown Tour
7 stops · about 28 min
▶ Start
✦ Build a Smart PathDuration · preferences ›
{{ g.name }}{{ g.count }}
{{ p.name }}
{{ p.sub }}
Suffolk campus map
{{ p.n }}
{{ p.name }}
+
−
⌂
Stop 2LAW & GRADUATE · 2:08
David J. Sargent Hall
‹
▶ Watch stop
›
⤢
‹
☺
♡
⚑
?
2b Editorial · Campus Map as a framed panel · tour as a numbered strip · stop detail in a side card · directory below
Northfield College
StoriesExploreCampus tourDates & FAQ
⌕ Search buildings and places
Sign in
Apply
Campus tour
Walk the campus,
one stop at a time.
3 of 7 stops
Continue tour
{{ s.n }}
{{ s.name }}
{{ s.meta }}
Campus map
{{ p.n }}
{{ p.name }}
All 14AcademicsHousingAthleticsCitySupport
+
−
Tour stopSelectedOther place
STOP 2 OF 7
▶
VideoPhotos · 4360°Transcript
LAW & GRADUATE
Sargent Hall
Home to the law school and graduate business programs. Classrooms for 25 to 300, a law library and the moot courtroom.
◷ 7:00 AM – Midnight⌖ 120 Tremont St
Next stop →
♡
Nearby
Samia Academic Center2 min
Frank Sawyer Building2 min
One Court Street4 min
2c Guide · Campus Sidebar persists · category tabs filter pins · Smart Path builder floats · stop detail as a bottom sheet
Harbor State
University
⌂ Home
▦ Explore
⚑ Campus tour
♡ Saved
? FAQ
▭ Key dates
Your tour
3/7
Now at
Sargent Hall
✓Frank Sawyer Building
2Sargent Hall
3Samia Academic Center
4One Court Street
+ 3 more
Sign in or register
Sign in
{{ t.label }}
⌕ Find a building
✦ Build my path
Campus map
{{ p.n }}
{{ p.name }}
✦ Smart Path
×
A tour sized to your visit.
Duration
30 min
45 min
60 min
Include
Academics
Housing
Athletics
City
Generate path · 5 stops
STOP 2 OF 7Law & Graduate · 2:08
David J. Sargent Hall
Law school, graduate business programs, law library and the moot courtroom.
VideoPhotos · 4360°Transcript
▶ Watch stop
Next stop →
Home-page teaser
A campus-map section type: cropped map with pins, "Explore the campus" button, and tour progress when started. Switchable like any section.
Mobile
All three collapse to full-screen map, bottom sheet for the selected stop, directory and Smart Path as drawers. Tour dock sits above the tab bar.
What's shared
Map engine, pin rendering, tour logic, Smart Path, media tabs (video / photos / 360° / transcript). Only placement, chrome and pin style change per template.
Turn 1 · Template variations · desktop 1440
Three templates, one platform
Same feature set (hero, personalisation, video sections, StudentHUB, tour, CTAs) arranged three different ways, each on a different demo brand. A client picks a template, a theme and their sections; the platform renders it. 1a is the Suffolk pattern as-is; 1b and 1c are new.
1a Cinema Dark theme · video hero · right HUB rail · 16:9 rows · the Suffolk pattern
SUFFOLK UNIVERSITY
Video LibraryCampus Discovery
⌕ Search
StudentHUB
Boston is our campus.
Make it yours.
What's a typical day at Suffolk like? That's entirely up to you! Hands-on learning, vibrant campus organizations, experiential internships, and cheering on the Rams.
▶
Welcome to Suffolk
Explore authentic student stories in Boston
✦ Make It Yours ×
Choose what matters to you to tailor your video library:
{{ c.label }}
✦ Recommended For You
Top stories curated for future Suffolk Rams
View all ›
{{ v.badge }}
{{ v.time }}
{{ v.title }}
{{ v.cat }}
↻ Continue Exploring
Pick up right where you left off
View all ›
{{ v.title }}
{{ v.cat }}
▤ Explore more
{{ c.name }}
{{ c.blurb }}
Explore ▶
Sign in to StudentHUB
Keep your saved videos and tour progress on every device.
Sign in / Register
▭ Visit›
✉ Request Info›
✎ Apply›
Continue watching See all
A Day in the Life
Your saved videos 2 saved
Boston is Our Campus
Arts & Sciences
Suffolk Downtown Tour 4 of 8
Next stop
David J. Sargent Hall
Continue Stop ›
1b Editorial Light theme · split hero · interests inline · magazine mosaic · HUB as a band
Northfield College
StoriesExploreCampus tourDates & FAQ
⌕ Search stories, majors, places
Sign in
Apply
Video viewbook
Four years that
start with a story.
Real students, real days. Pick what you care about and we'll put the right stories first.
▶ Watch the welcome
Start the campus tour
▶
Welcome to Northfield
2:20 · Student stories
I'm interested in
{{ c.label }}
Clear
Picked for you
All stories →
FEATURED
A Day in the Life of a Northfield Student
Morning lecture, afternoon internship downtown, evening at the climbing wall.
Student stories · 2:20
{{ v.time }}
{{ v.cat }}
{{ v.title }}
Your Northfield
Sign in to keep saved stories and tour progress on every device.
Sign in / Register
Campus tour
3 of 7 stops
Next: Science Commons →
Continue watching
Residence halls tour
60% watched
Next steps
VisitRequest infoApply
Explore by theme
{{ c.name }}
{{ c.count }}
1c Guide Brand-tinted theme · left sidebar carries nav + HUB · compact hero · category tabs · square tiles
Harbor State
University
⌂ Home
▦ Explore
⚑ Campus tour
♡ Saved
? FAQ
▭ Key dates
Campus tour
3/8
Next stop
Harbor Library
Continue tour
Continue watching
Athletics at Harbor
Sign in or register
Keep your progress and saved videos.
Sign in
Harbor State video guide
See the campus the way students do.
▶ Start here
Personalise my guide
{{ t.label }}
⌕ Search
Recommended for you
Based on Business and City life · Edit
{{ v.cat }}
♡
{{ v.title }}
{{ v.time }} · {{ v.sub }}
Applications open
Apply to Harbor State
Start application
In person & virtual
Schedule a visit
Plan your tripRequest info →
How the variation system works
Template
Cinema · Editorial · Guide. Decides where the hero, personalisation, HUB and nav sit. One choice per client.
Theme
Dark · Light · Tinted. Works with any template. Brand colours fill the theme; the theme decides which colour is the background.
Card style
16:9 landscape · portrait posters · square tiles. Changes the feel of every video section without touching layout.
Sections
Each on or off, in any order. Three templates × three themes × three card styles already gives 27 distinct looks before colour and content.