Sticky Split Index
A split work index that pins the heading, intro, and a ruled facts list on the left while project tiles scroll on the right.
A split work index that pins the heading, intro, and a ruled facts list on the left while project tiles scroll on the right.
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
Sticky Split Index runs a two-column layout on a tall grid: the left column pins the Selected work heading, a short intro, and a ruled facts list (projects shipped, years in practice, long term clients, disciplines) while the right column scrolls through a stack of four project tiles. Each tile pairs a Placeholder thumbnail with the name, year, kind, role, and a one-line writeup, and the pinned column keeps the practice summary on screen as visitors browse.
The sticky behaviour comes from lg:sticky lg:top-24 on the
left column with self-start, so it holds position until the
scrolling side runs out. Facts and projects are two separate
arrays, so the summary numbers stay independent of the tiles.
Reach for this block as the main work section on a portfolio homepage when the practice has a handful of deep projects and a set of numbers worth keeping in view. The installer swaps the facts, project names, kinds, and writeups for their own.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is a product designer's selected work paired with a pinned practice summary. Other uses:
Tip: keep the pinned facts to four rows; a longer list outgrows the viewport and breaks the sticky effect.