Portfolio Services Template
What I can do for you.A services page: a full-bleed hero, a capabilities list, a process of working together, a featured project and a testimonial, closing on a contact card — styled by your tokens.
When to use this template
A services page has to make an offer legible: what is included, who it suits, and what happens next.
This one is dressed in Portfolio copy and runs 8 sections, opening on the Helm navbar and closing with the Anchor footer. In between it covers hero, features and process.
At a glance
- Page type
- Services
- Business
- Portfolio
- Sections
- 8
- Section types
- 8
- Design tokens
- Colour, Radius, Shadow, Spacing, Typography
- Requires JS
- No
- Price
- Free
8 sections in this page
Every section below is a real, responsive layout rendered in your own design tokens — not a screenshot. In page order:
-
Helm
NavbarA floating pill bar with a full-round edge and a deep shadow, centered so it reads as detached from the page top.
-
Canvas
HeroThe picture is the section: a full-bleed photograph fills the hero with the headline and buttons resting near the bottom.
-
Cascade
FeaturesA sticky heading on the left beside a divided vertical list of features, each led by an icon tile.
-
Blocks
ProcessA grid of numbered step cards, each leading with a large index number above its title and text.
-
Feature
ContentAn editorial feature — one large hero image spanning the width, with the story following in text columns.
-
Chorus
TestimonialsOne featured quote centered in a narrow column — a rating, a large quote and an author line, with the words as the visual.
-
Card
ContactOne centered elevated card holding the whole contact block — details, hours and a call to action together.
-
Anchor
FooterA minimal centered footer — a wordmark, one wrapping nav row, a divider, then copyright and social buttons.