Portfolio Studio Template
How the studio works.A studio page: a horizon hero, a featured story, an overlay gallery and a process timeline, closing on a contact card — styled by your tokens.
When to use this template
A studio page explains how the work happens — the practice, the approach and the people behind it.
This one is dressed in Portfolio copy and runs 7 sections, opening on the Helm navbar and closing with the Anchor footer. In between it covers hero, content and gallery.
At a glance
- Page type
- Studio
- Business
- Portfolio
- Sections
- 7
- Section types
- 7
- Design tokens
- Colour, Radius, Shadow, Spacing, Typography
- Requires JS
- No
- Price
- Free
7 sections in this page
Every section below is a real, responsive layout rendered in your own design tokens — not a screenshot. In page order:
-
1
Helm
NavbarA floating pill bar with a full-round edge and a deep shadow, centered so it reads as detached from the page top.
-
2
Mural
HeroCentered copy standing on a drawn horizon line that runs full width along the bottom edge.
-
3
Feature
ContentAn editorial feature — one large hero image spanning the width, with the story following in text columns.
-
4
Overlay
GalleryPortrait image tiles with the caption set on the photograph itself, over a soft bottom-up scrim.
-
5
Timeline
ProcessA vertical timeline threaded by a rail, each step marked by a dot with its title and text alongside.
-
6
Card
ContactOne centered elevated card holding the whole contact block — details, hours and a call to action together.
-
7
Anchor
FooterA minimal centered footer — a wordmark, one wrapping nav row, a divider, then copyright and social buttons.
Portfolio Studio template FAQ
Common questions about Portfolio Studio — how it compares with Portfolio Home, which of its 7 sections you can drop and where the sample copy in the preview comes from.