Koala UI

Portfolio

The our-work family: five ways for a studio or an agency to show what it has shipped. A scannable work index, alternating case-study rows, a card grid behind a load-more fade, a stills lightbox, and a slideshow.

Variant 1

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Variant 5

Pro

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add section-header

Built from#

Every variant opens with the SectionHeader lede. Variant 1 is the List component in its plain, divided form, which is where the hairline rule and the detached hover pill come from. Variant 3 clips its grid with LoadMore, the same component behind the CTA contact closer. Variant 4 hangs every tile off one shared Lightbox, whose trigger already carries the house image affordance (a scrim and a settling pill, and no movement), and Variant 5 is the Carousel with its line indicators. Nothing here re-styles a component that already exists.

Responsive#

The work index keeps its three meta columns aligned from md up and folds them into the row's secondary line below it, swapping the case-study chip for a caret so the row still fits a phone. The case-study rows stack to a single column below lg, always with the image leading, whichever side it took on the wide layout. The card grid folds from two columns to one and the load-more overlay stays pinned to the clipped edge at every width. The three-up image rows stack one-up below sm and widen their crop from a tall 3:4 to 16:10 there, because three portrait tiles side by side on a phone are slivers. The carousel keeps one project per full-width slide at every size and stays draggable. Step any preview through Mobile, Tablet and Desktop to confirm the rhythm holds.

FAQ#

Variant 1 is the index: the whole back catalogue at a glance, best when a studio has more work than a grid can carry. Variant 2 is the narrative version, three projects with room to say what each one solved. Variant 3 is the browsable catalogue, everything at once behind a load-more fade. Variant 4 is the photographic one, where the work is shown rather than described. Variant 5 is the focused one, a single project filling the frame. Pick by how much you want the visitor to read before they look.