Services Tabs
A heading and intro above a tabbed explorer where each service tab opens a two column panel with scope, meta rows, and a deliverables list.
A heading and intro above a tabbed explorer where each service tab opens a two column panel with scope, meta rows, and a deliverables list.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Services Tabs turns three offers into a tabbed explorer, product design, design systems, and ongoing support, so a visitor can read one offering in depth without leaving the section. Selecting a tab opens a bordered two column panel: scope and working-style paragraphs with a ruled engagement meta table on the left, and a deliverables list on the right.
Services are one typed array with a label, an intro and a note, a meta list of label and value rows, and a deliverables array. The tab pattern is the distinctive detail, it keeps three full writeups in one compact section and lets a reader compare them by clicking rather than scrolling past every word.
Reach for this block as the services section on a portfolio or services page when each offer deserves a full explanation but stacking all of them would overwhelm the page. The installer swaps the tab labels, the scope copy, the meta rows, and the deliverables for their own services.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product design, design systems, support split for a senior freelance practice. Other tabbed layouts:
Tip: keep the meta rows identical across tabs, timeline, price, and capacity in every panel, so a reader can compare offers without hunting for the number.